animation动画详解:制作颜色不停变化的正方形

讲解CSS3 animation动画属性,并通过实例《制作颜色不停变化的正方形》演示animation的使用。

animation  英[ˌænɪˈmeɪʃn] 美[ˌænəˈmeʃən]
n. 生气,活泼; 动画片制作,动画片摄制; [影视] 动画片;

CSS3 animation(动画) 属性

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

注意:Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。

说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

注意:

  • animation-name和animation-duration必须设置,其他可选
  • 通常根据不同内核的浏览器要加上不同的前缀,比如:chrome、safari:@-webkit-keyframes

在CSS选择器中,使用animition动画属性

声明一个动画(关键帧)格式如下:

@keyframes name{
    from{
    }
    to{
    }
}

@keyframes name{
    0%{
    }
    50%{
    }
        100%{
       }
}

①每个阶段用百分比表示,从0%到100%

②起止必须设置,即0%和100%或者from和to

例子:用animation属性制作颜色不停变化的正方形

1、定义一个动画

@-webkit-keyframes myframe{
                0%{
                    background-color: #7FFFD4;
                }
                25%{
                    background-color: coral;
                }
                50%{
                    background-color: cornflowerblue;
                }
                100%{
                    background-color: cyan;
                }
            }

2、在网页添加div

<div class="div1"></div>

3、给div定义属性

.div1{
                width: 500px;
                height: 500px;
                background-color: #7FFFD4;
                -webkit-animation: myframe 5s ease infinite;
            }

完整实例





消除img图片与div下边界之间空白的三种方法|www.125jz.com




125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1160.html

(1)
江山如画的头像江山如画管理团队
上一篇 2018年2月7日 下午8:27
下一篇 2018年2月8日 下午12:51

99%的人还看了以下文章

  • 未来将消失的十大职业,有没有你从事的工作?(必看)

    科技发展日新月异,有些原来难已想象的事情早已变成现实,无人驾驶,机器人技术,3D打印……未来几十年新技术的发展必然会给生活带来重大的影响。 未来将消失的十大职业之一:司机 无人驾驶技术的发展,会让司机、驾校和交警消失。 未来将消失的十大职业之二:银行柜员 线下支付的方法已经成为潮流,现在出门也不必带现金和钱包,仅靠一部手机就能够走到许多地方,到银行柜台办业务…

    2020年2月11日 未分类
    2.9K0
  • 让网页中视频、图片居中的CSS代码

    网页制作时,文章内容中的视频和图片,如何居中对齐? 文本有text-aglin:center; 但这对视频和图片是无效的。 解决方法:我们可以把对象设置成块级元素,使用margin:auto; 使文章内容中的视频和图片居中对齐(同div居中方法)。 网页中视频、图片居中实例: HTML代码: <!doctype html> <html&gt…

    2018年3月18日
    11.3K0
  • CSS3 制作精美圆角立体button

    CSS3 制作的精美圆角立体button,你可以改变代码,制作出自己需要的颜色和样式的按钮,点击下方运行查看效果。无标题文档 125JZ www.125jz.com 125JZwww.125jz.com 125JZ www.125jz.com

    2018年2月3日
    2.8K0
  • WordPress“无法将上传的文件移动至wp-content/uploads/”

    今天手机521网站上传图片,无法上传,提示“WordPress“无法将上传的文件移动至wp-content/uploads/”。看图片名称是从网上另存为的带中英文及一长串字符,我改了下文件名,改为小米note3.jpg,不再提示WordPress“无法将上传的文件移动至wp-content/uploads/”,但上传之后无法预览图片,如下图 点击媒体库的图片…

    2018年2月11日
    4.7K0
  • 网页中的块级元素和行内元素

    块级元素(block-level)在默认显示状态下占据整行,其他元素在下一行中显示。例如,<p>、<h1>、<div>等元素都是块级元素。 行内元素(inline-level,也叫作“内联”元素)与块级元素相反,在默认显示状态下,允许下一个对象与它本身在一行中显示。例如,<strong>、<a>、&…

    2018年7月10日
    2.2K0
  • 推荐:只有569KB的专业网页木马查杀工具(绿色免安装)

    一款只有569KB的专业网页木马查杀工具,永久免费,绿色软件,无须安装,下载后即可双击使用。支持本地快速查杀、远程FTP查杀和实时查杀三种模式。

    2018年2月12日
    2.1K0

发表回复

登录后才能评论