html 闪电的动态效果图,HTML5 CSS3实现的街道雷雨闪电动画
CSS
语言:
CSSSCSS
确定
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background: #fff;
}
.container {
width: 100vw;
height: 100vh;
background: url("/uploads/150201/old-street.jpg");
background-size: cover;
background-position: bottom;
animation: lightning 10s linear infinite;
transition: filter 5s;
}
.filtered {
filter: grayscale(100%);
}
.drop {
position: absolute;
bottom: 200px;
width: 1px;
height: 50px;
background: rgba(255, 255, 255, .3);
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
animation: rainFall .7s linear infinite;
}
.splash {
position: absolute;
width: 10px;
height: 1px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
transform: scale(0);
}
.grayscaleButton {
color: #E04F70;
padding: 10px;
background: none;
border-top: #3CB356 2px solid;
border-bottom: #46A0D7 2px solid;
border-right: 2px solid #FD8B0C;
border-left: 2px solid purple;
border-radius: 20px;
text-transform: uppercase;
font-weight: 800;
display: block;
width: 150px;
position: absolute;
top: 10px;
left: calc(50% - 75px);
outline: none;
}
.slider {
position: absolute;
top: 80px;
left: calc(50% - 100px);
width: 200px;
}
@keyframes rainFall {
100% {
transform: translate(0px, 900px);
}
}
@keyframes splashing {
0% {
transform: scale(0)
}
100% {
transform: scale(.7);
}
}
@keyframes lightning {
0% {
opacity: 1;
}
1% {
opacity: 0.9;
}
2% {
opacity: 1;
}
3% {
opacity: 0.9;
}
4% {
opacity: 1;
}
80% {
opacity: 1;
}
81% {
opacity: 0.9;
}
82% {
opacity: 1;
}
}
html 闪电的动态效果图,HTML5 CSS3实现的街道雷雨闪电动画相关推荐
- HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例 主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换 案例 ...
- html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
- 用html和css做动态动物,分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...
- 9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...
- html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示 下载资源: 28 次 下载资源 下载积分: 20 积分 js代码 var ...
- 分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...
- html插图动物主题代码,分享9款用HTML5/CSS3制作的动物、人物动画
本文作者html5tricks,转载请注明出处 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱 ...
- html5 渐变动画效果图,html5+css3城市场景动画_觉唯设计
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.在上一篇文章<盛开的CSS3梦幻荷花>中提到如何用css3制作丰富动画效果的两个思路,当然除此之外,结合使用javascrip ...
- html5场景动画效果图,HTML5+CSS3城市场景动画
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳.云朵.气球等动画效果;除此之外,页面 ...
最新文章
- Linux平台下QtCreator集成代码静态分析工具clang-tidy和Clazy
- KMeans和KMedoid 的Matlab实现
- shell中trap捕捉到信号的处理
- dvi黑屏解决方法_赛博朋克2077黑梦黑屏怎么办 黑梦BUG全黑模式解决方法
- C++ operator操作符重载(++,--,-,+,())
- codeigniter + Ajax (亲测)
- linux 将程序链接到 usr bin,Linux / usr / bin文件在重新启动后消失
- 《设计模式之禅》学习笔记(五)
- Xcode开发者使用技巧
- 解救开发者!鲲鹏、ModelArts、Atlas、5G MEC硬核来袭……
- 计算机应用水平考试dream,2016年职称计算机Dreamwaver使用教程:操作环境
- 怎么选择boost升压电路的电感?只要三个公式
- 服装尺寸 html,服装尺寸表
- Paper:可解释性之ICE/PDP《Peeking Inside the Black Box: Visualizing Statisti窥视黑盒内部:用个体条件期望ICE图可视化统计学习》翻译与解读
- java https双向验证_Https双向验证与Springboot整合测试-人来人往我只认你
- vivo手机mitmproxy安全证书安装
- 【Java】Java编译时错误:A JNI error has occurred, please check your installation and try again
- 智能纪元,简述NVIDIA的伟大航路
- C语言:比较三个数(double类型)的大小
- 前端提效 - js 批量导出 excel 为zip压缩包
热门文章
- C#实现在CAD图纸中插入另一个DWG图块的代码
- 如何找出电脑内的重复文件,查找电脑磁盘重复文件的方法
- 关于U盘存储大量小容量文件速度慢的解释(摘抄)
- Redis 在spring 中的应用
- 福昕阅读器打不开html文件吗,福昕阅读器打不开XP台式
- 教你如何微信公众号图文中怎么下载封面图
- python爬虫+抖音分享链接=可直接下载视频链接
- 优雅编程之这样使用枚举和注解,你就“正常”了(二十九)
- #if endif 的意思
- W801单片机学习笔记——调试器的配置与使用(适用于W801和W806)