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;
<!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>
<!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>
<!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>