简体中文(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
626

用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学习者快速成长！