看博客的时候随便点了一个MDN的网址,可能由于默写原因找不到那个网页了,就出现了404页,发现右下角萌物的眼睛在动,开始以为只是一张gif动图,
如图(箭头是截图时加的):
后来好奇看了一下,发现图片是CSS3实现的,由三部分组成:
HTML文档中这三个元素是这样写的:
<pre name="code" class="html"><!--左眼-->
<img id="beast404le" src="https://developer.cdn.mozilla.net/media/img/beast-404_LE.png" alt="" exifid="-1322502317" oldsrc="https://developer.cdn.mozilla.net/media/img/beast-404_LE.png">
<!--右眼-->
<img id="beast404re" src="https://developer.cdn.mozilla.net/media/img/beast-404_RE.png" alt="" exifid="-1997515592" oldsrc="https://developer.cdn.mozilla.net/media/img/beast-404_RE.png">
<!--身体-->
<img class="beast 404" src="https://developer.cdn.mozilla.net/media/img/beast-404.png" alt="" id="exifviewer-img-1" exifid="1000920688" oldsrc="https://developer.cdn.mozilla.net/media/img/beast-404.png">
用CSS3的动画实现左右眼转动:
#beast404le {
left: 125px;
top: 65px;
-webkit-animation-name: crazylefteye;
-moz-animation-name: crazylefteye;
-ms-animation-name: crazylefteye;
animation-name: crazylefteye;
}
使用的是CSS3的Animation属性,Animation需要定义@keyframes关键帧规则来实现动画效果,也就是上面代码中名为crazylefteye的一个关键帧,于是在一个外部引用文件中找到了左眼的@keyframe crazylefteye:
@-moz-keyframes crazylefteye{0%{left:125px;top:65px}10%,20%{left:118px;top:56px}40%{left:148px;top:62px}50%{left:145px;top:72px}60%{left:121px;top:70px}100%,70%{left:125px;top:65px}}@-webkit-keyframes crazylefteye{0%{left:125px;top:65px}10%,20%{left:118px;top:56px}40%{left:148px;top:62px}50%{left:145px;top:72px}60%{left:121px;top:70px}100%,70%{left:125px;top:65px}}@-o-keyframes crazylefteye{0%{left:125px;top:65px}10%,20%{left:118px;top:56px}40%{left:148px;top:62px}50%{left:145px;top:72px}60%{left:121px;top:70px}100%,70%{left:125px;top:65px}}@-ms-keyframes crazylefteye{0%{left:125px;top:65px}10%,20%{left:118px;top:56px}40%{left:148px;top:62px}50%{left:145px;top:72px}60%{left:121px;top:70px}100%,70%{left:125px;top:65px}}@keyframes crazylefteye{0%{left:125px;top:65px}10%,20%{left:118px;top:56px}40%{left:148px;top:62px}50%{left:145px;top:72px}60%{left:121px;top:70px}100%,70%{left:125px;top:65px}}
为了保持跨浏览器兼容,分别定义了-webkit-animation-name, -moz-animation-name, -ms-animation-name, animation-name四个animation-name的@keyframes。
至此,实现了此萌物转眼睛的动画,从@keyframes的代码上也稍微可以看出,萌物眼睛动的很不规则,事实也确实是这样,要不怎么叫crazylefteye。
Mozilla肯为一个简单的图片做这么多工作,的确有认真、热爱coding的精神在里面。