css变形:transform
平移 translate(x,y)
translateX
translateY
transform:translate(100px,0)
旋转 rotate(deg) 旋转多少度,不会改变元素的形状
缩放 scale(x,y) 如果只书写了一个值,默认第2个参数等于第一个值
scaleX
scaleY
倾斜 skew(x,y) deg 会改变元素的形状
skewX
skewY
如果说我们想给一个元素同时设置多个 变形属性!
transform: 倾斜 缩放 旋转 ;
多个属性之间使用空格隔开!
我们上面的变形属性都是一瞬间就完成了!没有看到中间过程!
如果想看到!使用css过渡属性 transition==>是一个动画的转换过程!
css过渡属性:
transition:property duration timing-function delay
property:过渡或者动画的css属性,例如color,width,如果想都设置使用all
duration:完成过渡效果需要的时间 s为单位
timing-function: 过渡函数
ease:默认值 速度由快到慢
linear:匀速
ease-in:越来越快
ease-out:越来越慢
ease-in-out:先加速后减速
delay:过渡开始的延迟时间 s为单位
CSS动画
01.创建关键帧
@keyframes 名称(animates){
0%{
css属性:属性值;
}
50%{
css属性:属性值;
}
100%{
css属性:属性值;
}
}
02.怎么调用关键帧
animation:关键帧的名称 3s linear 1s;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css3变形</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } li{ list-style: none; float: left; margin-left: 15px; background: rgba(230,130,0,0.5); border-radius: 5px;/*圆角属性*/ } li:hover{ /*transform 变形属性*/ /* transform:translate(4px,5px) ;平移*/ transform: rotate(90deg) scale(1.5);/* 旋转的同时放大1.5倍*/ /* transform: skewY(20deg); transform: skewX(20deg); 倾斜属性*/ } a{ text-decoration: none; } a:hover{ background: rgba(150,230,100,0.5); border-radius: 5px; } </style> </head> <body> <ul> <li><a href="#">服装城</a></li> <li><a href="#">美妆馆</a></li> <li><a href="#">超市</a></li> <li><a href="#">全球购</a></li> <li><a href="#">闪购</a></li> <li><a href="#">团购</a></li> <li><a href="#">拍卖</a></li> <li><a href="#">金融</a></li> </ul> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3过渡</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; background-color: pink; text-align: center; line-height: 100px; transition:all 3s linear 2s; /** all: transition-property 3s : transition-duration linear: transition-timing-function 2s: transition-delay */ } div:hover{ background-color: red; font-size: 25px; transform: rotate(90deg) scale(1.5); /*旋转的同时放大1.5倍 这两个效果 一次性到位*/ /*transition属性的值: 01.transition-property:过渡的css属性的名称(color,font-size,background)等! 想给多个属性设置过渡效果,使用all! 02.transition-duration:过渡效果需要的时间! 03.transition-timing-function:设置速度曲线! ease:慢速开始,之后变快! linear:匀速! ease-in:慢速开始! ease-out:慢速结束! 04.transition-delay:过度效果开始前需要等待的时间!默认 0s! */ } </style> </head> <body> <div> 大家辛苦了! </div> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3动画</title> <style type="text/css"> div{ height: 50px; width: 50px; background: pink; /*调用动画*/ animation:animates 5s linear 1s 2; } /*创建 关键帧*/ @keyframes animates{ 0%{ width: 0px; transform: translate(50px,0); } 25%{ width: 25px; height: 25px; transform: translate(150px,0) rotate(90deg); } 50%{ width: 50px; height: 50px; transform: translate(300px,0) rotate(180deg); } 75%{ width: 25px; height: 25px; transform: translate(150px,0) rotate(270deg); } 100%{ width: 50px; height: 50px; transform: translate(50px,0) rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>