FCC---Create Visual Direction by Fading an Element from Left to Right---一个带好看背景色的圆形图案，从左到右移动，透明度opacity渐变为0.1，背景色渐渐消失的效果

For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen.

In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule.

 

练习题目：

Target the element with the id of ball and add the opacity property set to 0.1 at 50%, so the element fades as it moves to the right.

 

练习代码：

 1 <style>
 2 
 3   #ball {
 4     width: 70px;
 5     height: 70px;
 6     margin: 50px auto;
 7     position: fixed;
 8     left: 20%;
 9     border-radius: 50%;
10     background: linear-gradient(
11       35deg,
12       #ccffff,
13       #ffcccc
14     );
15     animation-name: fade;
16     animation-duration: 3s;
17   }
18 
19   @keyframes fade {
20     50% {
21       left: 60%;
22       opacity: 0.1;
23     }
24   }
25 
26 </style>
27 
28 <div id="ball"></div>

 

效果：

一个带好看背景色的圆形图案，从左到右移动，透明度opacity渐变为0.1，背景色渐渐消失的效果

posted @ 2019-10-25 16:15  jane_panyiyun  阅读(298)  评论(0)  编辑  收藏  举报