首页 > 蚂蚁部落 > 正文

CSS3 元素水平运动和背景色切换动画效果
2017-11-02 16:38:51   来源:   评论:0 点击:

下面分享一段代码实例,它利用CSS3的animation动画实现了div元素的水平运动效果,当然也可以垂直运动,在运动期间,元素的背景颜色会不断的

下面分享一段代码实例,它利用CSS3的animation动画实现了div元素的水平运动效果,当然也可以垂直运动,在运动期间,元素的背景颜色会不断的发生切换。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>div{  width: 100px;  height: 100px;  line-height: 100px;  text-align: center;  background-color: red;  position: relative;	/*创建一个动画	anim:动画的名称	5s:动画的播放时间	infinite alernate:动画播放完成后回过头播放原动画,类似于Cocos中的resever动作*/  animation: anim 5s infinite alternate;}/*设置各个阶段的状态*/@keyframes  anim {  0%{    background-color: red;    left: 0px;    top: 0px;  }  25%{    background-color: blue;    left: 200px;    top: 0px;  }  50%{    background-color: #ccffcc;    left: 200px;    top: 200px;  }  75%{    background-color: cyan;    left: 0px;    top: 200px;  }  100%{    background-color: red;    left: 0px;    top: 0px;  }}</style></head><body>  <div>蚂蚁部落</div></body></html>

相关阅读:

(1).animation可以参阅CSS3 animation一章节。

(2).@keyframes可以参阅CSS3 @keyframes一章节。

相关热词搜索:

上一篇:外部引入的CSS文件名后面的问号的作用是什么
下一篇:CSS3 鼠标悬浮div旋转缩放

分享到: 收藏
评论排行