简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - 用css動畫方式描述:一個球彈起落下(持續時間2s,,執行一次)
巴扎黑
巴扎黑 2017-05-16 13:44:36
0
2
662

用css動畫方式描述:一個球彈起落下(持續時間2s,,執行一次)

巴扎黑
巴扎黑

全部回覆(2)
巴扎黑
巴扎黑2017-05-16 13:46:36 2樓

隨意寫的 沒有考慮相容 可以自己更改一下運動速度什麼的

    <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
點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-05-16 13:46:36 1樓

不知道你是不是要這樣，建議你還是看一下css3
jsbin demo

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！