CSS3实现动画
2015-09-26 16:44
579 查看
CSS3实现一个简单的动画
可以改变任意多的样式任意多的次数,用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成,为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
HTML代码:
<div> <span class="span" id="span1" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu"> ></span> <span id="span2" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu"> <</span> <span id="span3" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu"> ∧</span> <span id="span4" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu"> ∨</span> </div>
CSS3代码:
<style> .span{ position:relative; animation-duration:2s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/ animation-timing-function:linear; /*规定动画的速度曲线。默认是 "ease"*/ animation-delay:0; /*规定动画何时开始。默认是 0。*/ animation-iteration-count:infinite; /*规定动画被播放的次数。默认是 1。*/ animation-direction:alternate; /* 规定动画是否在下一周期逆向地播放。默认是 "normal"*/ animation-play-state:running; /*规定动画是否正在运行或暂停。默认是 "running"。*/ /* Safari and Chrome: */ -webkit-animation-duration:2s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; } #span1 { top:100px; left:300px; color:#009999; position:relative; animation-name:myfirst1; /* Safari and Chrome: */ -webkit-animation-name:myfirst1; } @keyframes myfirst1 { from {color:#009999 ; left:300px; top:100px;} to {color:#ffffff; left:320px; top:100px;} } @-webkit-keyframes myfirst1 /* Safari and Chrome */ { from {color:#009999 ; left:300px; top:100px;} to {color:#ffffff; left:320px; top:100px;} } #span2 { top:100px; left:120px; color:#009999; position:relative; animation-name:myfirst2; /* Safari and Chrome: */ -webkit-animation-name:myfirst2; } @keyframes myfirst2 { from {color:#009999 ; left:120px; top:100px;} to {color:#ffffff; left:100px; top:100px;} } @-webkit-keyframes myfirst2 /* Safari and Chrome */ { from {color:#009999 ; left:100px; top:100px;} to {color:#ffffff; left:80px; top:100px;} } #span3 { top:50px; left:100px; color:#009999; position:relative; animation-name:myfirst3; /* Safari and Chrome: */ -webkit-animation-name:myfirst3; } @keyframes myfirst3 { from {color:#009999 ; left:100px; top:50px;} to {color:#ffffff; left:100px; top:30px;} } @-webkit-keyframes myfirst3 /* Safari and Chrome */ { from {color:#009999 ; left:90px; top:50px;} to {color:#ffffff; left:90px; top:50px;} } #span4 { top:150px; left:0px; color:#009999; position:relative; animation-name:myfirst4; /* Safari and Chrome: */ -webkit-animation-name:myfirst4; } @keyframes myfirst4 { from {color:#009999 ; left:0px; top:150px;} to {color:#ffffff; left:0px; top:170px;} } @-webkit-keyframes myfirst4 /* Safari and Chrome */ { from {color:#009999 ; left:130px; top:150px;} to {color:#ffffff; left:130px; top:170px;} } </style>
实现的效果就是从上下左右各个方向的动态箭头,一般用于提醒用户可以向下或者向上拖动。
相关文章推荐
- DOM与元素节点内联样式
- CSS设置一行文字,超出部分自动隐藏
- CSS设置一行文字,超出部分自动隐藏
- css总结
- CSS3中的动画基础
- 移动端网页解决CSS的active伪类无效的方法
- 简析CSS表达式attr()的运用
- CSS计数器counter()的用法简介
- 进一步理解CSS编程中的块级元素和行内元素
- 获取元素的style样式(内联,内部)
- 2015-09-22 css2
- html与css笔记
- 2015-09-21 css学习1
- 模块化的CSS
- 初步学习css3之3D动画
- css学习笔记(四)-文本属性
- HTML与CSS
- CSS小知识
- 960CSS框架,之前有用过 了解下框架基本原理
- CSS框架960Grid从入门到精通一步登天