CSS3皮球落地弹起
分类:实例代码
CSS3皮球落地弹起属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了皮球落地弹起的效果。
本例子中的皮球外观上仅仅是一个圆形球而已,不过能够学到一些css3属性的相关用法。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .box { width: 400px; height: 300px; border: 1px #ccc solid; margin: 30px auto; position: relative; } .box .ball { width: 140px; height: 140px; border-radius: 50%; position: absolute; top: 0; left: 50%; margin-left: -70px; background: -webkit-linear-gradient(top,#fff,#999); box-shadow: inset 0 0 30px #999,inset 0 -15px 70px #999; -webkit-animation: jump 1s ease-in-out infinite; z-index: 1; } .box .ball:after { content: " "; display: block; width: 70px; height: 30px; border-radius: 50%; position: absolute; top: 10px; left: 50%; margin-left: -35px; background: -webkit-linear-gradient(#ffffff,#ccc); } .shadow { width: 80px; height: 60px; border-radius: 5%; position: absolute; bottom: 0; left: 50%; margin-left: -40px; background: rgba(20,20,20,.1); box-shadow: 0 0 25px 20px rgba(20,20,20,.1); transform: scaleY(.3); -webkit-animation: shrink 1s infinite; } @-webkit-keyframes jump { 0% { top: 0; -webkit-animation-timing-function: ease-in; } 65% { top: 160px; height: 140px; } 75% { height: 120px; } 100% { top: 0; height: 140px; } } @-webkit-keyframes shrink { 0% { width: 90px; height: 60px; -webkit-animation-timing-function: ease-in; } 65% { width: 10px; height: 5px; margin-left: -5px; background: rgba(20,20,20,.3); box-shadow: 0 0 25px 20px rgba(20,20,20,.3); } 100% { width: 90px; height: 60px; background: rgba(20,20,20,.1); box-shadow: 0 0 25px 20px rgba(20,20,20,.1); } } </style> </head> <body> <div class="box"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html>
效果比较简单,更多内容可以参阅相关阅读。
相关阅读:
(1).border-radius参阅CSS3 border-radius一章节。
(2).box-shadow参阅CSS3 box-shadow一章节。
(3).animation参阅CSS3 animation一章节。
(4).linear-gradient参阅css3 linear-gradient线性渐变一章节。
(5).@keyframes参阅CSS3 @keyframes一章节。
CSS3皮球落地弹起,这样的场景在实际项目中还是用的比较多的,关于CSS3皮球落地弹起就介绍到这了。