P78-前端基础动画效果-小球跳跃动画练习

P78-前端基础动画效果-小球跳跃动画练习

1.概述

通过一个小球跳跃练习上篇文章学习的动画效果

2.小球跳跃


<html>
  <head>
    <meta charset="UTF-8">
    <title>动画title>

    <style>
      .outer {
      
        height: 500px;
        border-bottom: 10px greenyellow solid;
        margin: 50px auto;
        overflow: hidden;
      }

      .outer div {
      
        float: left;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #bbffaa;
        margin-right: 4%;
        animation: ball .9s forwards linear infinite alternate;
      }

      div .box1 {
      
        background-color: orange;
        animation-delay: .1s;
      }

      div .box2 {
      
        background-color: yellow;
        animation-delay: .2s;
      }

      div .box3 {
      
        background-color: yellowgreen;
        animation-delay: .3s;
      }

      div .box4 {
      
        background-color: aquamarine;
        animation-delay: .4s;
      }

      div .box5 {
      
        background-color: bisque;
        animation-delay: .5s;
      }

      div .box6 {
      
        background-color: blue;
        animation-delay: .6s;
      }

      div .box7 {
      
        background-color: crimson;
        animation-delay: .7s;
      }

      div .box8 {
      
        background-color: darkviolet;
        animation-delay: .8s;
      }

      div .box9 {
      
        background-color: lightpink ;
        animation-delay: .9s;
      }

      /* 创建小球下落的动画 */
      @keyframes ball {
      
        from {
      
          margin-top: 0;
        }

        to {
      
          margin-top: 400px;
        }
      }
    style>
  head>
  <body>
    <div class="outer">
      <div class="box1">div>
      <div class="box2">div>
      <div class="box3">div>
      <div class="box4">div>
      <div class="box5">div>
      <div class="box6">div>
      <div class="box7">div>
      <div class="box8">div>
      <div class="box9">div>
    div>
  body>
html>

3.小球跳跃效果

你可能感兴趣的:(最美前端,#,前端【H5+Css3】)