css属性之animation与@keyframes制作天空动态云彩
来源:互联网 发布:js设置select不可编辑 编辑:程序博客网 时间:2024/06/15 01:51
(一)先来说说keyframes
keyframes就是关键帧的意思,动画不就是一帧一帧的吗
keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果
@keyframes sky_background{
0%{
background:#FF0000;
color:#FF0000
}
50%{
background:#00FFFF;
color:#FF00FF
}
100%{
background:#FF0000;
color:#FF0000
}
}
像这样就ok
(二)接下来说说animation根据w3c提供有下面参数
1.animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。
2.animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。
3.animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier
4.animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0
5.animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。
6.animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放
7.animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值
.sky {
height: 480px;
background: #007fd5;
position: relative;
overflow: hidden;
-webkit-animation: sky_background 50s ease-out infinite;
-moz-animation: sky_background 50s ease-out infinite;
-o-animation: sky_background 50s ease-out infinite;
animation: sky_background 50s ease-out infinite;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
这是一个实例这样就ok只用了部分值
下面用一个小例子来结束本文 素材来源于17素材网
<span style="font-size:10px;"><!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纯CSS3多层云彩变换动画特效</title><style> html, body { margin: 0; height: 100%}.sky { height: 480px; background: #007fd5; position: relative; overflow: hidden; -webkit-animation: sky_background 50s ease-out infinite; -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.clouds_one { background: url("img/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_one 50s linear infinite; -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.clouds_two { background: url("img/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.clouds_three { background: url("img/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}@-webkit-keyframes sky_background { 0% {background: #007fd5;color: #007fd5 } 50% {background: #000;color: #a3d9ff } 100% {background: #007fd5;color: #007fd5 }}@-moz-keyframes sky_background { 0% {background: #007fd5;color: #007fd5 } 50% {background: #000;color: #a3d9ff } 100% {background: #007fd5;color: #007fd5 }}@keyframes sky_background { 0% {background: #007fd5;color: #007fd5 } 50% {background: #000;color: #a3d9ff } 100% {background: #007fd5;color: #007fd5 }}@-webkit-keyframes cloud_one { 0% {left: 0 } 100% {left: -200% }}@-moz-keyframes cloud_one { 0% {left: 0 } 100% {left: -200% }}@keyframes cloud_one { 0% {left: 0 } 100% {left: -200% }}@-webkit-keyframes cloud_two { 0% {left: 0 } 100% {left: -200% }}@-moz-keyframes cloud_two { 0% {left: 0 } 100% {left: -200% }}@keyframes cloud_two { 0% {left: 0 } 100% {left: -200% }}@-webkit-keyframes cloud_three { 0% {left: 0 } 100% {left: -200% }}@-moz-keyframes cloud_three { 0% {left: 0 } 100% {left: -200% }}@keyframes cloud_three { 0% {left: 0 } 100% {left: -200% }}</style></head><body><div class="sky"><div class="clouds_one"></div><div class="clouds_two"></div><div class="clouds_three"></div></div></body></html></span>
- css属性之animation与@keyframes制作天空动态云彩
- CSS3 animation属性 与 @keyframes规则
- CSS3动画animation相关属性与关键帧规则keyframes
- Using Keyframes – WebKit CSS Animation Examples
- CSS3 animation 属性 CSS3 @keyframes 规则
- 云彩和天空
- css3 -webkit-animation与-webkit-keyframes
- CSS3动画——@keyframes规则和animation属性
- 在animation的"keyframes"
- CSS3 animation,@keyframes 动画
- css属性之帧动画属性(animation)
- css--animation属性
- CSS Z-index属性 和 @keyframes创建动画
- CSS 3 Keyframes 把玩
- css @keyframes动画
- CSS动画@-webkit-keyframes
- css 动画 @keyframes
- CSS@keyframes使用方法
- LINUX常用命令汇总
- MyEclipse从SVN导入Maven项目后右键无Maven4MyEclipse选项
- 改善C#程序的建议9:使用Task代替ThreadPool和Thread
- Direct2D Intro - Modify the Pixels of a Bitmap Source
- mysql常用速查
- css属性之animation与@keyframes制作天空动态云彩
- 去除苹果手机默认的圆角
- 第一次接触PhoneGap
- 机器学习网址记录
- Xcode使用介绍之七:常用插件
- Android:让EditText不自动获取焦点
- inline,__inline,__forceinline的详细说明
- exports 和 module.exports 的区别
- log4j、logback汇总