过度
<style>
div{
width: 200px;
height: 200px;
background-color: red;
transition-property: width,background-color;
/*需要过渡的属性，多个属性以，隔开*/
transition-duration: 2s,3s;
/*过渡在多久内完成，多少个时间以,隔开*/
transition-timing-function: ease-in;
/*过渡的样式 可以不设置*/
transition-delay: 0s;
/*过度是否需要延迟且延迟的时间 可以不设置*/
}
div{
width: 200px;
height: 200px;
background-color: red;
transition: all 1s ease-in 0s;
/*简写格式 property duration function delay 其中过渡样式和延迟时间可以不设置，如果多个过渡一样可以用all代替*/
transition: width 1s ease-in 0s,background-color 1s ease-out 0s;
/*多个属性以，隔开*/
}
div:hover{
width: 400px;
background-color: pink;
}
</style>
过渡三要素
1：需要有属性发生改变
2：哪个属性需要发生改变
3：过渡持续的时间
手风琴菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 280px;
margin: 100px auto;
list-style: none;
border: 1px solid #000;
overflow: hidden;
}
ul li {
width: 160px;
height: 100%;
float: left;
transition: all 0.5s;
/*border: 1px solid #000;*/
/*box-sizing: border-box;*/
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
}
</style>
</head>
<body>
<ul>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
</body>
</html>
2D转换和形变中心点
2d转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
font-size: 0;
margin: 100px auto;
border: 1px solid #000;
}
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
margin: 40px;
}
div span:nth-child(1) {
background-color: black;
transform: translate(100px,100px);
/*沿X轴和Y轴移动*/
/*transform: translateX(-50px);*/
/*沿X轴*/
/*transform: translateY(-50px);*/
/*沿Y轴*/
}
div span:nth-child(2) {
transform: rotate(300deg);
/*旋转*/
}
div span:nth-child(3) {
transform: scale(1.5, 1.5);
/*沿X轴Y轴缩放，1代表不变，相同属性可以简写*/
/*transform: scaleX(1.5);*/
/*沿X轴X轴缩放*/
/*transform: scaleY(1.5);*/
/*沿X轴Y轴缩放*/
}
div span:nth-child(4) {
transform: skew(50deg, 50deg);
/*沿X轴和Y轴倾斜*/
transform: skewX(50deg);
/*沿X轴倾斜*/
transform: skewY(50deg);
/*沿Y轴倾斜*/
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
形变中心点
改变元素旋转中心点
transform-origin:可以接受三个类型的参数
1:px
2:百分比
3:top left right center bottom;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 200px auto;
position: relative;
}
ul li {
width: 200px;
height: 200px;
list-style: none;
position: absolute;
left: 0;
top: 0;
/*transform-origin: 0% 0%;*/
/*以左上角为中心点*/
/*transform-origin: 50% 50%;*/
/*以自身中心点为中心点*/
/*transform-origin: 100% 100%;*/
/*右下角为中心点*/
/*transform-origin: 0px 0px;*/
/*以左上角为中心点*/
/*transform-origin: 100px 100px;*/
/*以自身中心点为中心点*/
/*transform-origin: 200px 200px;*/
/*右下角为中心点*/
/*transform-origin: center center;*/
/*以自身中心点为中心点*/
/*transform-origin: top left;*/
/*以左上角为中心点*/
transform-origin: right bottom;
/*右下角为中心点*/
}
ul li:nth-child(1) {
background-color:red;
transform: rotate(30deg);
}
ul li:nth-child(2) {
background-color: pink;
transform: rotate(60deg);
}
ul li:nth-child(3) {
background-color:gray;
transform: rotate(90deg);
}
ul li:nth-child(4) {
background-color:green;
transform: rotate(120deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2d过渡和形变中心点扑克牌倒下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 314px;
height: 476px;
border: 1px solid #000;
margin: 100px auto;
background-color: pink;
perspective: 500px;
}
div:hover img{
transform: rotateX(90deg);
}
div img {
width: 100%;
transition: all 0.5s;
transform-origin: center bottom;
}
</style>
</head>
<body>
<div>
<img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=4ea39bbcf8198618554ae7d62b844516/63d9f2d3572c11df5454a1fe632762d0f603c262.jpg" alt="">
</div>
</body>
</html>
网友评论