前言
最近两天在研究CSS应为要懂想看懂前端的代码,并且能够做出前端网页这也是基础的东西,用css实现动画,这个功能虽然不复杂,但是对提高学习兴趣还是很有帮助的,所以今天就选了一个慕课上的例子自己模仿着做了一下,对于初学者来说模仿也是一种修炼.
正文
首先咱们来看看网页动画的整体效果吧.
主要用到了四个元素如下图所示
下面简单给介绍一下body中的代码:
<body>
<div>
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="imooc"></div>
</div>
</body>
css中的代码是什么呢?
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
-webkit-animation: circle_inner linear 10s infinite;
animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
-webkit-animation: circle_middle linear 10s infinite;
animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
-webkit-animation: circle_outer linear 10s infinite;
animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
from { transform: rotateX(0deg); }
to { transform: rotateX(360deg); }
}
@keyframes circle_middle {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes circle_outer {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
</style>
css实现动画主要就是使用animation的属性来进行搭配,常用到的几个属性:
transform-style 属性
语法:
transform-style: flat|preserve-3d;
flat值表示:子元素将不保留其3D位置
preserve-3d值表示:子元素将保留3D位置
animation 复合属性 检索或设置对象所应用的动画特效
语法:
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
animation-timing-function属性 检索或设置对象动画的过度类型
语法:
animation-timing-function:ease | linear | ease-in | ease-in-out | step-start | step-end | …
linear:线性过渡.等同于贝塞尔曲线(0.0,0.0,1.0,1.0)
ease:平滑过渡.等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快.等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢.等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:由慢到快再到慢.等同于贝塞尔曲线(0.42,0,0.58,1.0)
以上五个属性是经常使用到的.
结束
慢慢学习总是能够学到东西的,只要坚持不懈总会成功的.所以加油!