【CSS3】动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div id="div1"><div id="div2"></div></div> 10 </body> 11 </html>
1 #div1{ 2 width: 200px; 3 height: 150px; 4 background:pink; 5 perspective: 900px;/*为子元素定义3D效果*/ 6 } 7 #div2{ 8 width: 200px; 9 height: 150px; 10 background:orange; 11 } 12 #div2:hover{ 13 /*transform: translate(50px,1em);*//*右下平移*/ 14 /*transform: translate(2em);*//*右平移*/ 15 /*transform: translate(-50px);*//*左平移*/ 16 /*transform: translate(0,-50px);*//*上平移*/ 17 /*transform: translateX(60px);*/ 18 /*transform: translateY(40px);*/ 19 /*transform: none;*//*不偏移*/ 20 21 /*transform: scale(0.5,0.5);*//*小于1为缩小*/ 22 /*transform: scale(1.5);*//*大于1为放大。当只有一个值时为x轴y轴同时缩放同样大小倍数*/ 23 /*transform: scaleX(0.9);*/ 24 /*transform: scaleY(0.7);*/ 25 26 /*transform: rotate(30deg);*//*单位角度。正值顺时针旋转，负值逆时针旋转。*/ 27 /*transform: rotate(0.2rad);*//*单位弧度*/ 28 29 /*transform: skewX(30deg);*//*倾斜*/ 30 /*transform: skewY(30deg);*/ 31 /*transform: skew(30deg,30deg);*/ 32 33 /*transform: matrix(1,0,0.5,1,0,0);*//*第1个参数x轴缩放，第2个参数y轴倾斜，第3个参数x轴倾斜，第4个参数y轴缩放，第5个参数x轴平移，第6个参数y轴平移*/ 34 35 /*transform: scale(0.5,0.5) rotate(30deg);*/ 36 37 /*transform-origin: left top;*//*像素/百分比，x轴left、right、center，y轴top、bottom、center*/ 38 /*transform-origin: 0 75px;*/ 39 /*transform-origin: 50% 0;*/ 40 41 /*transform: rotate(0.3rad);*/ 42 /*transform: rotate(30deg);*/ 43 44 /*transform: translate3d(0,0,-200px);*//*z轴参数为正则靠近，为负则远离*/ 45 /*transform: translateZ(-300px);*/ 46 /*transform: rotate3d(1,0,0,30deg);*//*绕x轴旋转*/ 47 /*transform: rotate3d(0,1,0,30deg);*//*绕y轴旋转*/ 48 /*transform: rotate3d(0,0,1,30deg);*//*绕z轴旋转*/ 49 transform: rotate3d(1,1,1,30deg);/*绕xyz轴旋转*/ 50 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <ul> 10 <li class="li1">HTML5</li> 11 <li class="li1">CSS3</li> 12 <li class="li1">JavaScript</li> 13 <li class="li1">jQuery</li> 14 </ul> 15 <hr> 16 <ul> 17 <li>HTML5</li> 18 <li>CSS3</li> 19 <li>JavaScript</li> 20 <li>jQuery</li> 21 </ul> 22 </body> 23 </html>
1 li{ 2 list-style: none; 3 background:linear-gradient(to left,orange,pink); 4 margin: 10px; 5 padding: 10px; 6 width: 90px; 7 border-radius: 5px; 8 text-shadow: rgba(); 9 } 10 .li1{ 11 float: left; 12 } 13 hr{ 14 clear: left; 15 border:2px dotted blue; 16 } 17 li:hover{ 18 background:linear-gradient(to right,orange,pink); 19 transform-origin: left top; 20 transform: rotate(10deg); 21 }
过渡：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div></div> 10 </body> 11 </html>
1 div{ 2 width: 300px; 3 height: 200px; 4 background-color: red; 5 } 6 div:hover{ 7 width: 150px; 8 height: 100px; 9 background-color: blue; 10 transition-property: all; 11 /*transition-property: background-color;*/ 12 transition-duration: 1s; 13 /*transition-timing-function: ease;*//*先慢后快*/ 14 transition-timing-function: linear;/*匀速*/ 15 transition-delay: 1s;/*默认0无延时*/ 16 }
