zoukankan      html  css  js  c++  java
  • FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动

    The previous challenges covered how to use some of the animation properties and the @keyframes rule.

    Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation.

    Here's an example:

    animation-iteration-count: 3;

    In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.

    把次数改为无线infinite就一直动。

    练习题目:

    To keep the ball bouncing on the right on a continuous loop, change the animation-iteration-count property to infinite.

    练习代码: (不需要全部写,填空进去)

     1 <style>
     2 
     3   #ball {
     4     width: 100px;
     5     height: 100px;
     6     margin: 50px auto;
     7     position: relative;
     8     border-radius: 50%;
     9     background: linear-gradient(
    10       35deg,
    11       #ccffff,
    12       #ffcccc
    13     );
    14     animation-name: bounce;
    15     animation-duration: 1s;
    16     animation-iteration-count: infinite;
    17   }
    18 
    19   @keyframes bounce{
    20     0% {
    21       top: 0px;
    22     }
    23     50% {
    24       top: 249px;
    25       width: 130px;
    26       height: 70px;
    27     }
    28     100% {
    29       top: 0px;
    30     }
    31   }
    32 </style>
    33 <div id="ball"></div>

    效果:

    在设置区域内,带一个好看背景色的小球,上下弹动,小球的大小会挤压又恢复,通过@keyframe设置的0%-100%的值实现的

  • 相关阅读:
    List遍历时删除与迭代器(Iterator)解惑
    从一次“并发修改字段业务”引出多版本并发控制与InnoDB锁
    RocketMQ存储机制与确认重传机制
    Java中的锁
    jmeter在non-GUI模式下用法
    Java SPI机制简述
    深拷贝、浅拷贝与Cloneable接口
    Java中的小数运算与精度损失
    java中的枚举类
    SpringBoot是如何实现自动配置的
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/11738794.html
Copyright © 2011-2022 走看看