CSS3实现带阴影的弹球
2024-09-02 10:47:11
实现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:;
/*因为是绝对定位，距左边百分之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:;
}
.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:;
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:; }
65%{ top: 160px; height: 140px; }
75%{ height: 120px; }
100%{ top:; height: 140px; }
}
@-o-keyframes jump {
0%{ top:; }
65%{ top: 160px; height: 140px; }
75%{ height: 120px; }
100%{ top:; height: 140px; }
}
@keyframes jump {
0%{ top:; }
65%{ top: 160px; height: 140px; }
75%{ height: 120px; }
100%{ top:; 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>
最新文章
- jQuery 常用速查
- java中hashcode()和equals()的详解
- 十五天精通WCF——第五天 你需要了解的三个小技巧
- bootstrap 2.3版与3.0版的使用区别
- 快学Java NIO
- URAL 1416 Confidential --最小生成树与次小生成树
- PHP自定义函数使用外部变量
- property在括号中应该怎样写
- JVM笔记6：JVM类加载机制
- [Lua]表驱动索引编程，form.lua
- 使用jQuery播放/暂停 HTML5视频
- 分布式日志收集系统Apache Flume的设计详细介绍
- rabbitmq配置文件和站点管理（二）
- 组合 数论 莫比乌斯反演 hdu1695
- Django项目开发
- java日期 Calendar类的使用
- PHP中$_POST和$_GET的用法
- linux下(Window当然也可以)解决idea创建maven项目导入过慢问题
- Cloudstack系统配置（三）
- Docker源码分析（八）：Docker Container网络（下）