FCC---Animate Elements at Variable Rates----一闪一闪亮晶晶，不同的闪动节奏

There are a variety of ways to alter the animation rates of similarly animated elements.

So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules.

To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the twinkle animation.

You can change the @keyframes rule for one of the elements so the stars twinkle at different rates.

 

练习题目：

Alter the animation rate for the element with the class name of star-1 by changing its @keyframes rule to 50%.

 

练习代码：

 1 <style>
 2   .stars {
 3     background-color: white;
 4     height: 30px;
 5     width: 30px;
 6     border-radius: 50%;
 7     animation-iteration-count: infinite;
 8   }
 9 
10   .star-1 {
11     margin-top: 15%;
12     margin-left: 60%;
13     animation-name: twinkle-1;
14     animation-duration: 1s;
15   }
16 
17   .star-2 {
18     margin-top: 25%;
19     margin-left: 25%;
20     animation-name: twinkle-2;
21     animation-duration: 1s;
22   }
23 
24   @keyframes twinkle-1 {
25     50% {
26       transform: scale(0.5);
27       opacity: 0.5;
28     }
29   }
30 
31   @keyframes twinkle-2 {
32     20% {
33       transform: scale(0.5);
34       opacity: 0.5;
35     }
36   }
37 
38   #back {
39     position: fixed;
40     padding: 0;
41     margin: 0;
42     top: 0;
43     left: 0;
44     width: 100%;
45     height: 100%;
46     background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
47   }
48 </style>
49 
50 <div id="back"></div>
51 <div class="star-1 stars"></div>
52 <div class="star-2 stars"></div>

 

效果如下：

 

posted @ 2019-10-29 09:28  jane_panyiyun  阅读(259)  评论(0)  编辑  收藏  举报