实现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>CSS3实现带阴影的弹球
原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8366500.html