经过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


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>

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。