简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - Description using CSS animation: a ball bounces up and down (duration 2s, executed once)
巴扎黑
巴扎黑 2017-05-16 13:44:36
0
2
627

Describe using CSS animation: a ball bounces up and down (duration 2s, executed once)

巴扎黑
巴扎黑

reply all(2)
巴扎黑
巴扎黑2017-05-16 13:46:36 2 floor

Written casually without considering compatibility. You can change the movement speed or something by yourself

    <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
Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-05-16 13:46:36 1 floor

I don’t know if this is what you want, I suggest you take a look at css3
jsbin demo

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！