最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3动态效果学习笔记
时间:2022-06-25 13:43:39 编辑:袖梨 来源:一聚教程网
@keyframe 规定动画
一般是跟animation一起用
animation : 规定动画的名字 规定动画的时间 规定动画的速度曲线。
@keyframe 定义动画的名称{ 动画时长的百分比。{一个或多个合法的 CSS 样式属性} }
目前大部分浏览器都没有支持@keyframe 和animation;所以要分浏览器书写
@keyframe
1.safari和chrome浏览器
@-webkit-keyframes myfrom{
from {top:0;}
to {top:200px;}
}
2.Firefox浏览器
@-moz-keyframes myfrom{
from {top:0;}
to {top:200px;}
}
3.Opera浏览器
@-o-keyframes myfrom{
from {top:0;}
to {top:200px;}
}
animation
1.safari和chrome浏览器
@-webkit-animation : myfrom 5s infinite
2.Firefox浏览器
@-moz-animation : myfrom 5s infinite
2.Opera浏览器
@-o-animation : myfrom 5s infinite
例子
代码如下 | 复制代码 |
word" content="CSS3动态效果demo"> animation 动画属性 @keyframes: 规定动画 源代码 animation-delay: 规定动画何时开始 源代码 animation-iteration-count: 规定动画次数 源代码 animation-direction: 规定下次动画逆向 源代码 源代码 源代码 源代码 源代码 <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1 conns">animation-delay:规定动画何时开始 </div> |
相关文章
- 炉石传说血DK卡组怎么样 炉石传说血DK卡组推荐介绍 11-05
- 咒术回战幻影夜行官网在哪里 咒术回战幻影夜行官网地址介绍 11-05
- 蚂蚁庄园今天答题答案2024年10月26日 11-05
- 以闪亮之名变装物语甜趣篇怎么玩 11-05
- 闪耀暖暖永夜禁锢怎么玩 11-05
- 闪耀暖暖永夜禁锢怎么玩 闪耀暖暖永夜禁锢活动介绍 11-05