实现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
时间： 2024-10-31 02:18:31