CSS3实现带阴影的弹球
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现带阴影的弹球
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
實(shí)現(xiàn)div上下跳動(dòng)時(shí)，底部陰影隨著變化
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS3實(shí)現(xiàn)帶陰影的彈球</title><style type="text/css">.box{width: 400px;height: 300px;border: 1px #cccccc solid;/*距上下30，左右居中*/margin: 30px auto;/* 設(shè)置相對(duì)定位，以便子元素使用絕對(duì)定位 */position: relative;}.box .ball, .box .ball:after{border-radius: 50%;position: absolute;left: 50%;background: linear-gradient(top, #ffffff, #999999);background: -webkit-linear-gradient(top, #ffffff, #999999);background: -moz-linear-gradient(top, #ffffff, #999999);background: -ms-linear-gradient(top, #ffffff, #999999);background: -o-linear-gradient(top, #ffffff, #999999);}.box .ball{width: 140px;height: 140px;top: 0;/*因?yàn)槭墙^對(duì)定位，距左邊百分之50，這里距左是左邊距盒子左邊，所以這里需要通過margin向左移動(dòng)寬度一般的距離*/margin-left: -70px;-webkit-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;-moz-box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;box-shadow: inset 0 0 30px #999999,inset 0 -15px 70px #999999;-webkit-animation: jump 5s ease-in infinite;-o-animation: jump 5s ease-in infinite;animation: jump 5s ease-in infinite;/*讓球遮住陰影（使球顯示在陰影上方）*/z-index: 1;}.box .ball:after{content: "";display: block;width: 70px;height: 30px;border-radius: 50%;top: 10px;margin-left: -35px;}.box .shadow{width: 80px;height: 60px;border-radius: 50%;position: absolute;bottom: 0;left: 50%;margin-left: -40px;background: rgba(20, 20, 20, .1);-webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);-moz-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);-webkit-transform: scaleY(.3);-moz-transform: scaleY(.3);-ms-transform: scaleY(.3);-o-transform: scaleY(.3);transform: scaleY(.3);-webkit-animation: shrink 5s ease-in infinite;-o-animation: shrink 5s ease-in infinite;animation: shrink 5s ease-in infinite;}@-webkit-keyframes jump {0%{ top: 0; }65%{ top: 160px; height: 140px; }75%{ height: 120px; }100%{ top: 0; height: 140px; }}@-o-keyframes jump {0%{ top: 0; }65%{ top: 160px; height: 140px; }75%{ height: 120px; }100%{ top: 0; height: 140px; }}@keyframes jump {0%{ top: 0; }65%{ top: 160px; height: 140px; }75%{ height: 120px; }100%{ top: 0; height: 140px; }}@-webkit-keyframes shrink {0%{ width: 90px; height: 60px; }65%{ width: 10px; height: 5px; margin-left: -5px; background: rgba(20, 20,20, .3);-webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);-moz-box-shadow: 0 0 25px 20px 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);-webkit-box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);-moz-box-shadow: 0 0 25px 20px 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>?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaobaizhiqian/p/8366500.html
總結(jié)
以上是生活随笔為你收集整理的CSS3实现带阴影的弹球的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 95式、95-1式步枪差别在哪些地方？
- 下一篇： linux-java