【JavaScript】动态的小球

参考：

1、CSS 对比 JavaScript 动画

2、CSS制作水平垂直居中对齐_水平居中, 垂直居中 教程_w3cplus：https://www.w3cplus.com/css/vertically-center-content-with-css

3、box-shadow：http://www.w3school.com.cn/cssref/pr_box-shadow.asp

4、css平移：http://webkkl.com/style/translate.php、https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

5、css动画：http://www.cnblogs.com/xkxf/p/6718391.html

效果图：

思路：

1、画一个静态的小球。

2、修改成动态。

代码：基本参考url1。。。

css：

<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Ball</title>
        <style>
            html {
                background: #F2F2F2;
            }
            
            p {
                font-family: helvetica, arial, sans-serif;
                text-align: center;
            }
            
            .ball {
                width: 100px;
                height: 100px;
                
                background: #FFF;
                box-shadow:0 10px 20px rgba(0,0,0,0.5);
                /*参数：水平阴影 竖直阴影 模糊距离！阴影的距离 阴影的颜色*/
                
                border-radius: 50%;
                
                animation: down 6s infinite;
                /*3s一次 无限次 */
            }
            
            @keyframes down {
                0% {
                    transform: translateY(-100px);
                }
                100% {
                    /*平移变换*/
                    transform: translateY(768px);
                }
            }
        </style>
    </head>
    <body>
        <p>Dynamic Ball</p>
        <div class="ball"></div>
    </body>
</html>

 JavaScript：貌似本质还是css，只不过用JS增强了控制。。。循环播放没解决。。。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dynamic Ball</title>
        <style>
            html {
                background: #F2F2F2;
            }
            
            p {
                text-align: center;
            }
            
            .ball {
                width: 100px;
                height: 100px;
                
                background: #FFF;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
                
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <p>Dynamic Ball</p>
        <div class="ball"></div>
        
        <script>
            function animateBall() {
                var target = document.querySelector('.ball'); // 返回文档中匹配指定 CSS 选择器的一个元素
                var player = target.animate([
                    {transform: 'translateY(-50px)'},
                    {transform: 'translateY(768px)'},
                ], 7000);
                // 参数分别是 起始动画 结束动画 持续时间ms
            }
            animateBall();
        </script>
    </body>
</html>

 参考2：循环动画

1、http://blog.sina.com.cn/s/blog_448f59f30102vvoj.html

2、http://www.open-open.com/lib/view/open1471745095074.html

3、廖雪峰JavasCript

4、setTimeout:http://www.w3school.com.cn/jsref/met_win_settimeout.asp

5、setInterval：http://www.jb51.net/shouce/htmldom/jb51.net.htmldom/htmldom/met_win_setinterval.asp.html

Interval：间隔。

JavaScript:循环动画。。。缺点是控制还不够细致。。

        <script>
            function animateBall() {
                var target = document.querySelector('.ball'); // 返回文档中匹配指定 CSS 选择器的一个元素
                var player = target.animate([
                    {transform: 'translateY(100px)'},
                    {transform: 'translateY(600px)'},
                ], 4000); // 参数分别是 起始动画 结束动画 持续时间ms
            }
            //animateBall(); 循环调用animateBall();无法实现循环
            animateBall(); // 免去等待第一次间隔时间。
            setInterval("animateBall()", 4000);
        </script>

 

posted @ 2017-04-22 08:55  xkfx  阅读(563)  评论(0)  编辑  收藏  举报