html如何让雨滴消失,使用纯CSS3实现雨滴掉落水面的动画特效
CSS
语言：
CSSSCSS
确定
body {
background: #1a1a1a;
font-family: sans-serif;
}
h1,
h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
h1 {
top: 24px;
font-size: 12px;
}
h2 {
top: 44px;
font-size: 10px;
opacity: 0.7;
}
h2 a {
color: white;
text-decoration: none;
border-bottom: 1px dotted #999999;
}
body {
width: 100%;
height: 100vh;
perspective: 600px;
}
ul {
position: absolute;
width: 60vh;
height: 60vh;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(65deg);
transform-style: preserve-3d;
}
ul li {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
border-radius: 50%;
transform-style: preserve-3d;
}
ul li span {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
ul li span.raindrop {
width: 5px;
height: 5px;
background: #cccccc;
animation: raindrop 8s ease-in infinite;
animation-fill-mode: backwards;
}
ul li span.ripple {
width: 100%;
height: 100%;
border: 2px solid #cccccc;
animation: ripple 8s ease-out infinite;
animation-fill-mode: backwards;
}
li:nth-child(1) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(45deg);
}
li:nth-child(1) span.raindrop,
li:nth-child(1) span.ripple {
animation-delay: 0s;
}
li:nth-child(2) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(90deg);
}
li:nth-child(2) span.raindrop,
li:nth-child(2) span.ripple {
animation-delay: 1s;
}
li:nth-child(3) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(135deg);
}
li:nth-child(3) span.raindrop,
li:nth-child(3) span.ripple {
animation-delay: 2s;
}
li:nth-child(4) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(180deg);
}
li:nth-child(4) span.raindrop,
li:nth-child(4) span.ripple {
animation-delay: 3s;
}
li:nth-child(5) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(225deg);
}
li:nth-child(5) span.raindrop,
li:nth-child(5) span.ripple {
animation-delay: 4s;
}
li:nth-child(6) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(270deg);
}
li:nth-child(6) span.raindrop,
li:nth-child(6) span.ripple {
animation-delay: 5s;
}
li:nth-child(7) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(315deg);
}
li:nth-child(7) span.raindrop,
li:nth-child(7) span.ripple {
animation-delay: 6s;
}
li:nth-child(8) {
transform-origin: 50% 100%;
transform: translate(-50%, -50%) rotate(360deg);
}
li:nth-child(8) span.raindrop,
li:nth-child(8) span.ripple {
animation-delay: 7s;
}
@keyframes raindrop {
0% {
opacity: 0;
transform: translate(-50%, -50%) translateZ(200px);
}
1%,
9% {
opacity: 1;
}
10%,
100% {
opacity: 0;
transform: translate(-50%, -50%) translateZ(0px);
}
}
@keyframes ripple {
0%, 10% {
transform: translate(-50%, -50%) scale(0);
}
40% {
opacity: 1;
}
80%,
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1);
}
}
html如何让雨滴消失,使用纯CSS3实现雨滴掉落水面的动画特效相关推荐
- html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
- html适合app的登陆页面,纯CSS3创意手机APP登录界面动画特效
这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效.该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮. 使用方法 H ...
- html5云朵效果,纯CSS3打造逼真的多层云彩动画特效
这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效.该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果. 使用方法 HTML结构 该多层 ...
- html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构 折叠面板的html结 ...
- html弹跳特效,有趣的纯CSS3弹性卡通小怪物弹跳动画特效
这是一款使用纯CSS3制作的非常有趣的卡通小怪物弹跳动画特效.该CSS3特效中有三个卡通小怪物,它们在不停的上下弹跳,并且各自的身体也带有一些弹性效果. 使用方法 HTML结构 每一个卡通小怪物的HT ...
- 纯css3可爱的Loading加载动画特效
这个是一款可爱的loading动画,觉得好看的小伙伴一定要试试哦! html代码 <div class="loadster"><div class="l ...
- 纯CSS3模拟iPhone X背景切换动画
尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的.今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景 ...
- html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
- css3雨滴掉落水面网页动画
下载地址 css3雨滴掉落水面网页动画,鼠标点击的时候触发雨滴掉落 dd:
最新文章
- 项目需求|10~15万|自动上料系统—将物料通过机械手臂挂在挂钩上
- 【错误记录】Visual Studio 编译 C++ 代码报错 ( To disable deprecation, use _CRT_SECURE_NO_WARNINGS. )
- Cloud Foundry Java客户端–流事件
- 是时候了解React Native了
- 动态添加element标签，数据操作
- 《大侦探皮卡丘》天龙八部在路上
- 自行车码表使用说明—SIGMA（西格玛） BC906
- 遇到一个Bug：Android: requestLayout() improperly called
- Idea安装完成后打不开的问题
- sas数据集怎么导出_SAS数据集和Excel的相互转换
- Super Map超图IServer加载BIM及精细模型操作
- 【Java】流式编程学习笔记
- html怎么添加音乐改大小,给视频添加背景音乐 或者更换音频ppt添加视频文件幻灯片尺寸设置...
- 拼多多为什么要致力于知识普惠？
- linux拷贝文件函数,如何使用Linux的splice()函数将文件复制到另一个文件？
- 爱看广场舞的老爷爷的脚本日记
- 熔盐储能系统市场调研
- 计算机基础（05）程序与程序设计语言
- USB数据线上的“疙瘩”
- 安卓玩机搞机技巧综合资源----手机显秒设置 多种方式【十一】