<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3变形功能 transform属性</title> <style type="text/css"> div{ width:300px; height: 300px; background-color:#000; } div:hover{ /*-moz-transform: rotate(45deg); 旋转*/ /*-moz-transform: scale(2,2); 缩放，不能设置为负值，可以设置小数 0.5*/ /*-moz-transform: skew(30deg);倾斜*/ /*-moz-transform: translate(50px);移动*/ } </style> </head> <body> <h1>rotate旋转</h1> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css动画功能</title> <style type="text/css"> div{ width:200px; height: 200px; background-color: aqua; -moz-transition:all 1s linear; } div:hover{ background-color: #e54d26; width: 400px; height: 400px; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3 animation属性的使用</title> <style> div{ width: 10px; height: 20px; background-color: aquamarine; } /* 关键帧的定义*/ @-webkit-keyframes mycolor { 0%{ background-color: #D2D2D2; } 10%{ background-color: #646464; width: 10px; } 20%{ background-color: aqua; width:20px ; } 80%{ background-color: #e54d26; width: 80px; } 100%{ background-color: blueviolet; width: 100px; } } div:hover{ -webkit-animation-name: mycolor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -moz-animation-iteration-count:1; } </style> </head> <body> <div></div> </body> </html>