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>
