zoukankan      html  css  js  c++  java
  • 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,背景色渐渐消失的效果

  • 相关阅读:
    [LeetCode] 22. Generate Parentheses
    3. Longest Substring Without Repeating Characters
    Python floor() 函数
    Python fabs() 函数
    Python exp() 函数
    Python cmp() 函数
    Python ceil() 函数
    小样本学习综述
    如何评估两张图片的差异
    网络模型mAP计算实现代码
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/11738624.html
Copyright © 2011-2022 走看看