css3强劲的动漫实际效果animate应用表明及访问器适

2021-03-10 20:19 jianzhan
好长时间没升级blog,之前发文(11月8日)到如今恰好1个月,期内新项目上的物品较为多,1时感觉時间较为紧,没来得及升级。这个礼拜终于是告1段落,补上几篇技术性性的文章内容。好吧,第1篇是有关css3动漫的应用。
昨日忽然看到jing.fm(这个歌曲网站十分非常好,许多实际效果我都很喜爱,假如你有兴趣爱好,能够去围观下)上歌曲播发时,专辑的旋转实际效果很非常好,因此提前准备自身动手能力写下,以备后用。結果第1次应用animate就遇到了坑爹的事儿,特调侃下。
1、最后的实际效果

如上图所示,最后是想让这个专辑的照片旋转起来,仿真模拟出唱片播发的实际效果(你能够去jing.fm上看看真正的实际效果,很赞,如今许多歌曲网站都加上了这个实际效果)。
2、构造编码

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf⑻'>
<title>歌曲专辑播发仿真模拟</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="bd">
<div id="musicBox">
<div class="cover rotateCD"></div>
<div class="mask"></div>
</div>
</div>
</body>
</html>

从上面的编码能够看出,因为是应用css3强劲的动漫实际效果,因此我的构造界定的十分简易(在合乎词义的前提条件下),另外沒有引入到javascript脚本制作文档。
musicBox来限制外围框的尺寸,內部的cover用来显示信息专辑封面照片,这个照片是下图左侧照片这样的,44方方,并不是圆形,因此我在后边做了个mask的div,它不做别的事儿,只是用来容下1个遮罩(下图右侧照片),盖住照片圆形以外的一部分。
    
3、css3款式表

拷贝编码
编码以下:

@charset utf⑻;
/* common: rotateCD */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
100%{
-webkit-transform : rotate(360deg);
}
}
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
100%{
-moz-transform : rotate(360deg);
}
}
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
100%{
-ms-transform : rotate(360deg);
}
}
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
100%{
-o-transform : rotate(360deg);
}
}
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
100%{
transform : rotate(360deg);
}
}
.rotateCD{
-webkit-animation: myrotate 9.5s infinite linear;
-moz-animation: myrotate 9.5s infinite linear;
-ms-animation: myrotate 9.5s infinite linear;
-o-animation: myrotate 9.5s infinite linear;
animation: myrotate 9.5s infinite linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
/* module: bd */
#bd{width: 960px;margin: 200px auto 0;}
/* module: musicBox */
#musicBox{position: relative;width: 430px;height: 430px;margin: 0 auto;overflow: hidden;}
#musicBox .cover{width: 300px;height: 300px;margin: 65px;background: url(../img/music1.jpg) 0 0 no-repeat;}
#musicBox .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/playerMask.png) 0 0 no-repeat;}

rotateCD这一部分的编码适配了多种多样高級访问器(自然是适用css3的),设定了动漫实行的時间和别的1些设定,你能够查寻animate的更多专业知识来深层次掌握。
针对上面的有关动漫重要帧keyframes的写法,踩了较为多的坑,1刚开始,我是看《HTML5与CSS3权威性指南》上的事例,它只写了chrome下的写法(较为坑爹,我猜想估算是作者觉得别的访问器的写法与此相近,因此让读者自身去探求),我想自然的把别的访问器的适配性rotate设定写变成,以下面的编码所示:

拷贝编码
编码以下:

@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);
}
....

这样致使的結果便是,chrome和safari下动漫一切正常,FF、opera和IE下均无动漫。实际上这一部分很好了解,myrotate的重要帧只是对webkit做了独特表明,别的访问器压根对此无动于衷,因此沒有动漫的实际效果。
因而,大家在写重要帧兼容款式的情况下,1定要写成下面的方式:

拷贝编码
编码以下:

@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
...
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
...
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
...
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
...
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
...

opera访问器也有个较为奇异的地区,它钟爱@keyframes myrotate{...},而对@-o-keyframes myrotate{...}不发烧感冒,因此你发现二者只存其1的情况下,前者能够完成动漫,然后者不可以完成动漫实际效果。我1直对此很是不解,后来寻找有关opera的详细介绍,说它是严苛的实行W3C网页页面规范。这样想一想,就搞清楚了为何它这般钟爱@keyframes myrotate{...}了。
4、总结
css3看起来十分幸福,可是具体应用中還是存在很多的不确定性性。假如不可以看到早已完成的编码模版,你很难相信自身的编码文件格式就1定正确。因此你能够到1些非常好的网站来观查各种各样动漫实际效果,挑选自身喜爱的动漫并转化成编码,免费下载下来后再依照自身的要求来撰写动漫编码。这样会让你的动漫实际效果完成起来事倍功半(不必担忧它达不到你的规定,上面有许多的实际效果,你能够自身组成,要是你的想像力够丰富多彩)。
好吧,本文到此完毕。
PS:文中应用到的访问器为chrome(21.0.1180.15)、safari5.1.7(7534.57.2)、opera(12.11)、FF(17.0.1)和IE10(10.0.9200.16438)。