利用css3中的animation来实现简单的动画效果

下1秒等待 2019-01-17 11:18:27
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:html+css3
作者:李伙
撰写时间:2019年1月17日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在学习前端过程中,如果我们想实现一些简单的动画效果,我们可以利用css3中的animation来实现。
css3为animation提供了以下几个属性:
animation-name:动画名称
animation-duration:动画运动时间
animation-timing-function:动画速度曲线
animation-delay:动画延迟时间
animation-iteration-count:动画播放次数(可以是具体次数,无数次为infinite)
animation是一个复合属性,其具体的格式为:
animation: 动画名称 动画运动时间 动画速度曲线 动画延迟时间 动画播放次数;
keyframes(关键帧):在css3中主要以“@ keyframes”开头,后面紧跟着动画名称与“{}”,“{}”里面主要是一些不同时间段需要执行的样式,“{}”里面可以在“0%”到“100%”之间创建多个百分比,不同百分比中可以给需要有动画效果的元素设置不同的样式。
animation中的animation-name(动画名称)需要和keyframes上的函数名一致
keyframes的格式如下:

@keyframes animation{
0%{
background: red;/*设置不同的样式*/
}
50%{
background: blue;/*设置不同的样式*/
}
100%{
background: green;/*设置不同的样式*/
}
}

下面是一个例子;
首先设置好几个div,如下:

<div class="sky">
<div class="cloud_one"></div>
<div class="cloud_two"></div>
<div class="cloud_three"></div>
</div>

然后再给每个div设置不同的样式,如下:

.sky{
height: 500px;
background: #007fd5;
overflow: hidden;
position: relative;
animation: sky1 50s ease-out infinite;
}
.cloud_one,.cloud_two,.cloud_three{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 300%;
}
.cloud_one{
background: url(../img/cloud_one.png);
animation: clouds 50s linear infinite;
}
.cloud_two{
background: url(../img/cloud_two.png);
animation: clouds 60s linear infinite;
}
.cloud_three{
background: url(../img/cloud_three.png);
animation: clouds 80s linear infinite;
}
@keyframes sky1{
0%{
background: #007fd5;
color: #007fd5;
}
50%{
background: #000;
color: #a3d9ff;
}
100%{
background: #007fd5;
color: #007fd5;
}
}
@keyframes clouds{
0%{
left: 0;
}
100%{
left: -200%;
}
}

这样一个简单的纯css3云彩动画效果就完成了。
...全文
656 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
执~漠 2019-01-18
  • 打赏
  • 举报
回复
瞭望select 2019-01-18
  • 打赏
  • 举报
回复
  • 打赏
  • 举报
回复
浪戟天下 2019-01-17
  • 打赏
  • 举报
回复
沙发,先占个楼,肥水不流外人田。

2,099

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 非技术区
社区管理员
  • 非技术区社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧