cari

Rumah  >  Soal Jawab  >  teks badan

html5 - Gunakan animasi css untuk menerangkan: bola melantun ke atas dan jatuh (tempoh 2s, dilaksanakan sekali)

Diterangkan menggunakan animasi CSS: bola melantun ke atas dan ke bawah (tempoh 2s, dilaksanakan sekali)

巴扎黑巴扎黑2778 hari yang lalu717

membalas semua(2)saya akan balas

  • 巴扎黑

    巴扎黑2017-05-16 13:46:36

    Ditulis secara santai tanpa mengambil kira keserasian Anda boleh menukar kelajuan pergerakan atau sesuatu sendiri

        <style>
            #app{
                width: 300px;
                height:400px;
                border: 1px solid #d6e9c6;
                position: relative;
            }
            .barTip{
                width: 100px;
                height: 10px;
                background: red;
                position: absolute;
                top: 130px;
                left: 32%;
            }
            #bar{
                position: absolute;
                width: 30px;
                height:30px;
                background: #2a6496;
                border-radius: 15px;
                left: 45%;
                animation-name:myfirst;
                animation-duration:2s;
                animation-timing-function:linear;
                /*animation-delay:2s;*/
                animation-iteration-count:1;
                animation-direction:alternate;
                animation-play-state:running;
            }
            @keyframes myfirst
            {
                0%   { top:0px;}
                10%  { top:20px;}
                20%  { top:40px;}
                30%  { top:60px;}
                40% { top:80px;}
                50%   { top:100px;}
                60%  { top:80px;}
                70%  { top:60px;}
                80%  { top:40px;}
                90% { top:20px;}
                100% { top:0px;}
            }
        </style>
    </head>
    <body>
    <p id="app">
        <p id="bar">
            <!--球-->
        </p>
        <!--板-->
        <p class="barTip">
        </p>
    </p

    balas
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-16 13:46:36

    Saya tidak tahu sama ada ini yang anda mahukan, saya cadangkan anda lihat css3
    demo jsbin

    balas
    0
  • Batalbalas