欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

CSS3实现带阴影的弹球

发布时间：2025/5/22 CSS 86 豆豆
生活随笔 收集整理的这篇文章主要介绍了 CSS3实现带阴影的弹球 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

实现div上下跳动时，底部阴影随着变化

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS3实现带阴影的弹球</title><style type="text/css">.box{width: 400px;height: 300px;border: 1px #cccccc solid;/*距上下30，左右居中*/margin: 30px auto;/* 设置相对定位，以便子元素使用绝对定位 */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;/*因为是绝对定位，距左边百分之50，这里距左是左边距盒子左边，所以这里需要通过margin向左移动宽度一般的距离*/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>

 

转载于:https://www.cnblogs.com/xiaobaizhiqian/p/8366500.html

总结

以上是生活随笔为你收集整理的CSS3实现带阴影的弹球的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。