FCC---Animate Multiple Elements at Variable Rates---还可以改循环时间,达到不同律动频率的效果
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes
rules.
You can achieve the same goal by manipulating the animation-duration
of multiple elements.
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop.
To make them twinkle at different rates, you can set the animation-duration
property to different values for each element.
练习题目:
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes
rules.
You can achieve the same goal by manipulating the animation-duration
of multiple elements.
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration
property to different values for each element.
练习代码:
<style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
} .star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
} .star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
} .star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
} @keyframes twinkle {
20% {
transform: scale(0.5);
opacity: 0.5;
}
} #back {
position: fixed;
padding:;
margin:;
top:;
left:;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style> <div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
效果如下:
最新文章
- Android笔记——Button点击事件几种写法
- awk
- [WPF系列]-DynamicResource与StaticResource的区别
- Linux 开机启动
- hive中分析函数window子句
- OpenStack Newton:集虚拟化,裸金属和容器部署的统一云平台(转载)
- WCF服务在高并发情况下报目标积极拒绝的异常处理 z
- ubuntu13.04下载android4.0.1源码过程
- 一个简单的Inno Setup例子
- Android Support v4、v7、v13的区别和应用场景
- [转]Unity批量制作预制物体Prefab
- javascript基础学习(四)
- 读书笔记 effective c++ Item 32 确保public继承建立“is-a”模型
- IBM Websphere 集群会话共享问题解决办法
- CSS鼠标样式 cursor 属性
- Java IO系列之四:NIO通信模型
- Windows单机最大TCP连接数的问题
- 转://利用从awr中查找好的执行计划来优化SQL
- spring cloud 笔记
- day_6.10 tcp三次握手 四次挥手