CSS animation动画:实现台球运动效果
在学习animation动画的时候，我就得这个特别有意思，以后还想制作其他的超酷的效果，以前觉得弄特效的特别帅，感觉现在年龄已经老了，要是从小就有那个资本啊，就想成为一名超级厉害的特效师。
1.如图所示：利用渐变阴影搭建了一个看似像台球桌的东西，其实跟台球桌还是有点差距，但是只是一下午时间，还弄了另一个案例所以效果还是不太好。
2.在弄这个杆子的时候就用了很久的方法，做一个这样的杆子让它本身旋转然后用transform移动它是在它本身没有旋转的状态上移动的，所以动图上面有一个旋转的效果并没有修复（希望某位大神能够指点迷津）。
3.两个通过计算让他运动，因为开先两个球都是通过position定位来做的，所以后面计算位置就不好计算，效果图就在下面了，老师开先讲的时候说的还是可以，我也觉得有点意思，想象力还是有点丰富。（为了写这个博客专门去下了一个录屏软件，不然有些效果就不能看出来，当然动图制作还有点生疏）
HTML代码
<div id="nav"><ul><li><a href="index.html">动画</a><ul><li><a href="案例7.html">动画1</a></li><li><a href="案例8.html">动画2</a></li><li><a href="案例9.html">动画3</a></li></ul></li><li><a href="移动.html">移动</a><ul><li><a href="案例1.html">移动1</a></li><li><a href="案例2.html">移动2</a></li><li><a href="案例3.html">案例3</a></li></ul></li><li><a href="旋转.html">旋转</a><ul class="drop2"><li><a href="案例4.html">案例1</a></li><li><a href="案例5.html">案例2</a></li><li><a href="案例6.html">案例3</a></li></ul></li></ul></div><div class="gan"></div><div class="wrap"><div class="d1"></div><div class="d2"></div><div class="q1"></div><div class="q2"></div></div>
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);}}
谢谢大家的欣赏，喜欢就点个赞吧！
