经过CSS3,我们能够创立动画,这能够在许多网页中替代动画图片、Flash动画以及JavaScript。
CSS3@keyframes规矩
如需在CSS3中创立动画,您需求学习@keyframes规矩。
@keyframes规矩用于创立动画。在@keyframes中规定某项CSS款式,就能创立由当前款式逐渐改为新款式的动画效果。
@keyframesmyfirst
{
from{background:red;}
to{background:yellow;}
}
@-moz-keyframesmyfirst/*Firefox*/
{
from{background:red;}
to{background:yellow;}
}
@-webkit-keyframesmyfirst/*Safari和Chrome*/
{
from{background:red;}
to{background:yellow;}
}
@-o-keyframesmyfirst/*Opera*/
{
from{background:red;}
to{background:yellow;}
}
css3翻转效果
分析:.container,.flip为了实现动画效果做准备。.front,.back各包裹一张图片。
实现该效果的HTML如下:
<divclass="container">
<divclass="flip">
<divclass="front">
<imgsrc="https://zzzjtd.com/images/pic00.jpg"alt="">
</div>
<divclass="back">
<imgsrc="https://zzzjtd.com/images/pic01.jpg"alt="">
</div>
</div>
</div>