CSS animation动画:实现台球运动效果

待我称王封你为后i 2022-03-08 06:51 339阅读 0赞

## CSS animation动画:实现台球运动效果 ##

在学习animation动画的时候，我就得这个特别有意思，以后还想制作其他的超酷的效果，以前觉得弄特效的特别帅，感觉现在年龄已经老了，要是从小就有那个资本啊，就想成为一名超级厉害的特效师。

1.如图所示：利用渐变阴影搭建了一个看似像台球桌的东西，其实跟台球桌还是有点差距，但是只是一下午时间，还弄了另一个案例所以效果还是不太好。

2.在弄这个杆子的时候就用了很久的方法，做一个这样的杆子让它本身旋转然后用transform移动它是在它本身没有旋转的状态上移动的，所以动图上面有一个旋转的效果并没有修复（希望某位大神能够指点迷津）。

3.两个通过计算让他运动，因为开先两个球都是通过position定位来做的，所以后面计算位置就不好计算，效果图就在下面了，老师开先讲的时候说的还是可以，我也觉得有点意思，想象力还是有点丰富。（为了写这个博客专门去下了一个录屏软件，不然有些效果就不能看出来，当然动图制作还有点生疏）

![台球动效图][20190314152852516.gif]

![台球静态大图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70]

## HTML代码 ##

## CSS代码 ##

*{ 
                box-sizing:border-box;
            }
        body{ 
            font-family:"microsoft Yahei";
            font-size:1em;
        }
        body,ul,li{ 
            margin:0;
            padding:0;
    
        }
        li{ 
            list-style:none;
        }
        a{ 
            text-decoration:none;
            font-size:1rem;
            color:#333;
            display:block;
            
        }
        #nav{ 
            width:550px;
            height:50px;
            background-color:rgba(0,0,0,.1);
            margin:30px auto;
        }
        #nav>ul>li{ 
            float:left;
            margin-right:50px;
            position:relative;
        }
        #nav>ul>li:nth-child(3n){ 
            margin-right:0;
        }
        #nav>ul>li>a{ 
            text-align:center;
            line-height:50px;
            width:150px;
            height:50px;
            
        }
        #nav>ul>li:hover{ 
            background-color:#5EB309;
            color:#fff;
            transition:all .2s linear;
        }
        #nav>ul>li:hover>ul{ 
            visibility:visible;
            opacity:1;
            transition:1s ease;
        }
        #nav>ul>li>ul{ 
            position:absolute;
            top:50px;
            padding:10px 0;
            background-color:#fff;
            border:1px solid #eee;
            visibility:hidden;
            opacity:0;
            z-index:2;
        }
        #nav>ul>li>ul>li>a{ 
            display:block;
            width:150px;
            height:50px;
            line-height:50px;
            padding-left:20px;
            transition:.2s linear;
        }
        #nav>ul>li>ul>li>a:hover{ 
            background-color:#5EB309;
            color:#fff;
           
        }
        .wrap{ 
            width:900px;
            height:500px;
            margin:80px auto;
            background-color:#458506;
            border-radius:40px;
            box-shadow:0 0 50px rgba(0,0,0,.5) inset;
            border: 20px solid #30530c;
            position:relative;
            
        }
        .wrap:after,.wrap:before,.d1,.d2{ 
            content:"";
            width:44px;
            height:44px;
            border-radius:50%;
            background:radial-gradient(#000,#222);
            position:absolute;
            z-index:3;
        }
        .wrap:after{ 
            top:0;
            left:0;
        }
        .wrap:before{ 
            top:0;
            right:0;
        }
        .d1{ 
            bottom:0;
            left:0;
        }
        .d2{ 
            bottom:0;
            right:0;
        }
        .q2,.q1{ 
            width:30px;
            height:30px;
            border-radius:50%;
            position:absolute;
        }
        .q1{ 
            background:linear-gradient(rgb(199, 198, 198) 10%,rgb(238, 237, 237));
            top:100px;
            left:100px;
            animation:move2 1s .50001s ease-in  ,move4 1.5s 1.50001s ease-out forwards ,move5 3.5s 3.00001s ease-out forwards;
    
        }
        .q2{ 
            background:linear-gradient(#FD7013 10%,#D65F00);
            top:300px;
            right:100px;
            animation:move3 .5s 1.50001s ease-in forwards;
        }
        .gan{ 
            width:10px;
            height:400px;
            position:absolute;
            top:10px;
            left:180px;
            background-color:#333;
            border-radius:5px 5px 1px 1px;
            z-index:1;
            animation:move6 .00001s ease forwards,move1 .5s .00001s ease-in;
        }
        @keyframes move1{ 
            0%{ 
                transform:translate(0) rotate(110deg);
                
            }
            100%{ 
                transform:translate(20px,10px) rotate(110deg);
            }
        }
        @keyframes move6{ 
            0%{ 
                transform:rotate(0);
                
            }
            100%{ 
                transform:rotate(110deg);
            }
        }
        @keyframes move2{ 
            0%{ 
                transform:translate(0);
                
            }
            100%{ 
                transform:translate(620px,190px);
            }
        }
        @keyframes move4{ 
            0%{ 
                transform:translate(620px,190px);
                
            }
            100%{ 
                transform:translate(220px,-100px);
            }
        }
        @keyframes move5{ 
            0%{ 
                transform:translate(220px,-100px);
                
            }
            100%{ 
                transform:translate(-50px,300px);
            }
        }
        @keyframes move3{ 
            0%{ 
                transform:translate(0);
            }
            100%{ 
                transform:translate(95px,128px);
            }
        }

谢谢大家的欣赏，喜欢就点个赞吧！

[20190314152852516.gif]: /images/20220308/43dcd0963638485d974ea58edc355dcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70]: /images/20220308/daa586ba6d644a57a031cd159d395e39.png