纯H5+CSS3实现下雨特效

下面这是效果图：

HTML部分代码：

为方便大家复制：

        <div class="container"><div class="rain"><span style="--speed:11"></span><span style="--speed:12"></span><span style="--speed:15"></span><span style="--speed:17"></span><span style="--speed:18"></span><span style="--speed:13"></span><span style="--speed:15"></span><span style="--speed:19"></span><span style="--speed:20"></span><span style="--speed:10"></span><span style="--speed:18"></span><span style="--speed:16"></span><span style="--speed:14"></span><span style="--speed:11"></span><span style="--speed:12"></span><span style="--speed:17"></span><span style="--speed:14"></span><span style="--speed:27"></span><span style="--speed:12"></span></div>

CSS3部分代码：

为了大家方便复制：

body{background-color: #212121;
/*     display: flex意思是弹性布局， */display: flex;/* justify-content是水平布局  项目在水平方向上居中 */justify-content: center;/* 设置垂直方向对齐方式 */align-items: center;width: 100%; /* 1vh=浏览器视窗的1% */height: 90vh;
}
/* 云的底座第一部分 */
.container{position: relative;width: 100px;height: 30px;background-color: #fff;border-radius: 100px;
}
.container::before{content:'';position: absolute;top: -20px;left: 10px;width: 30px;height: 30px;background: #fff;border-radius: 50%;/* 利用盒子阴影制作右边云彩 */box-shadow: 40px 0 0 20px #fff;
}
.rain{position: relative;display: flex;z-index: 1;
}
.rain span{position: relative;width: 8px;height: 8px;background: #fff;margin: 10px 2px;border-radius: 50%;/* 动画匀速运行 且自动循环 */animation: rain linear infinite;/* 设置下雨的速度 */animation-duration: calc(15s/var(--speed));/* 原点位置 */transform-origin:bottom;
}
@keyframes rain{0%{transform: translateY(0);}70%{transform: translateY(100px) scale(1);}100%{transform: translateY(100px) scale(0);}

纯H5+CSS3实现下雨特效相关推荐

开关灯效果HTML,H5+CSS3打开关闭灯泡开关动画特效
H5+CSS3打开关闭灯泡开关动画特效 html, body { font-family: Georgia, serif; font-style: italic; font-size: 4.2vmin ...
H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示代码展示 body代码 <!DOCTYPE html> <html lang="e ...
android窗帘拉开动画,H5+CSS3窗帘拉开收起动画特效源码
效果图今天给大家带来了一个简单的特效源码 H5+CSS3窗帘拉开收起动画特效源码废话不多说,上源码! html { box-sizing: border-box; } *, *::after, * ...
纯CSS3流光边框特效
实现原理: div的before元素当成左边框内部一个class=bottom的i标签当下边框 div的after元素当成右边框内部一个class=top的i标签当上边框效果图: 原理图: 左边 ...
php窗帘excel,H5+CSS3逼真的窗帘拉开收起动画特效
H5+CSS3逼真的窗帘拉开收起动画特效 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; ...
H5 css3入门基础练习特效、动画、表单
知识回顾: 1)SQL优化,规范,(本身这些细碎的知识点,) 不是马上掌握,面对这么多it技术,扩展眼界 jsp+servlet java做页面,马上被市场淘汰初学者 a. 提高打字速度, 1- 每 ...
可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
html语言闪烁特效代码,css3 文字闪烁特效代码
今天给大家分享几个文字闪烁特效代码,纯css3代码实现,对于新手小伙伴值得拿来学习一下. 文字闪烁特效一通过改变透明度来实现文字的渐变闪烁,代码如下: 文字闪烁:闪烁效果 .main{ color: ...
css3新动_10款重量级CSS3的全新特效实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

纯H5+CSS3实现下雨特效

纯H5+CSS3实现下雨特效相关推荐

最新文章

热门文章