css3中的animation属性动画效果代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3的animation功能</title> <style> div{ background:#ff0000; color:white; width:200px; position:absolute; top:200px; left:200px; } @-webkit-keyframes myTest { /*开始帧*/ 0%{ background:#ff0000; transform: rotate(0deg); } 25%{ background:#0000ff; transform:rotate(30deg); } 50%{ background:#fff000; transform:rotate(0deg); } 75%{ background:#000000; transform:rotate(-30deg); } 100%{ /*结束帧*/ background:#00ff00; transform:rotate(0deg); } } div:hover{ -webkit-animation:myTest 5s linear; } </style> </head> <body> <div>this is a test text</div> </body> </html>
css3中的transition属性动画效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition属性</title> <style> /*transition 属性是一个简写属性，用于设置四个过渡属性：*/ /*transition-property:规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）*/ /*transition-duration:规定完成过渡效果需要多少秒或毫秒(请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。)*/ /*transition-timing-function:规定速度效果的速度曲线(linear:匀速)*/ /*transition-delay:定义过渡效果何时开始(延迟时间，默认0s)*/ div{ background:#fff000; width:200px; transition: background 3s linear,color 1s linear,width 2s linear,transform 2s linear; } div:hover{ background:#ff0000; color:#fff; width:600px; transform: rotate(360deg); } </style> </head> <body> <div>this is a test text</div> </body> </html>