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,背景色渐渐消失的效果

  • 相关阅读:
    文档注释
    配置环境变量
    Java编译-->运行
    DOS命令(日后补充)
    字符、字符串函数
    输入字符串,逆序输出
    求矩阵最大元素值,以及行号和列号
    Apache和Tomcat的区别
    C# params关键字
    JSP的隐式对象(session)
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/11738624.html
Copyright © 2011-2022 走看看