有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版
前言
笔者上一篇发布的文章有趣的css—简单的下雨效果中有位老哥给我提了一个很棒的建议，大致意思是波纹应该产生于雨滴的消失处。
这是按照老哥的建议完善后的效果图：
由于我制作GIF图片的工具最多只支持制作33FPS的GIF图，所以看起来可能有一点点卡顿，实际的效果比图片还是要好一些的,点击这里可以在线查看2.0版的效果。
思路
制作背景
首先给body中添加一个id为rain的div，并通过背景颜色线性渐变得到天空-地平线-海面的效果。
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>简单的下雨效果2.0</title>
</head>
<body>
<div id="rain"></div>
</body>
</html>
#rain {
position: relative;
height: 100%;
background: linear-gradient(#333,#999 ,#1f4794);
background-repeat: no-repeat;
background-size: 100% 100%;
}
制作雨滴
通过设置背景颜色径向渐变得到圆形的水滴，再将其沿Y轴进行旋转得到椭圆形的水滴，最后给其添加水滴下落的动画效果。
.raindrop {
display: inline-block;
position: absolute;
top: 0;
left: 150px;
width: 5px;
height: 5px;
background: radial-gradient(#8fd4fc, #52b1f2, #0599fc);
border-radius: 5000px;
transform: rotateY(45deg);
animation: raindrop .8s;
}
@keyframes raindrop {
0% {top:5%;}
10% {top:10%;}
20% {top:20%;}
30% {top:30%;}
40% {top:40%;}
50% {top:50%;}
60% {top:60%;}
70% {top:70%;}
80% {top:80%;}
90% {top:90%;}
100% {top:95%;}
}
制作波纹效果
通过背景透明和圆形边框得到圆形的环，再将其沿X轴进行旋转得到椭圆形的环，最后给其添加环逐渐扩大的动画效果。
.ripple {
display: inline-block;
position: absolute;
top: 60vh;
left: 50vh;
border: 2px solid #8fd4fc;
border-radius: 5000px;
background: rgba(0, 0, 0, 0);
transform: rotateX(72deg);
animation: ripple .6s;
}
@keyframes ripple {
0% {
width: 2px;
height: 2px;
}
10% {
width: 4px;
height: 4px;
}
20% {
width: 6px;
height: 6px;
}
30% {
width: 8px;
height: 8px;
}
40% {
width: 10px;
height: 10px;
}
50% {
width: 12px;
height: 12px;
}
60% {
width: 14px;
height: 14px;
}
70% {
width: 16px;
height: 16px;
}
80% {
width: 18px;
height: 18px;
}
90% {
width: 20px;
height: 20px;
}
100% {
width: 22px;
height: 22px;
}
}
在雨滴被移除的位置添加波纹
通过计算移除雨滴的随机时间得到雨滴消失时距离顶部的距离。
let clientWidth;
let clientHeight;
window.onload = function onload(){
let rain = document.getElementById('rain');
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
function dorpRain(){
setTimeout(() => {
if(typeof clientWidth !== 'undefined' && null !== clientWidth){
let el = document.createElement('div');
el.setAttribute('class', 'raindrop');
let left = parseInt(Math.random() * clientWidth, 10) + 'px';
el.style.left = left;
rain.appendChild(el);
let time = parseInt(Math.random() * 350, 10);
setTimeout(() => {
rain.removeChild(el);
let newEl = document.createElement('div');
newEl.setAttribute('class', 'ripple');
newEl.style.left = left;
newEl.style.top = parseInt(clientHeight / 100 * 50 + (time / 350 * (clientHeight / 100 * 50)), 10) + 'px';
rain.appendChild(newEl);
setTimeout(() => {
rain.removeChild(newEl);
}, 600)
}, 400 + time, 10)
}
}, parseInt(10 + Math.random() * 10, 10))
}
dorpRain();
}
使波纹以水滴消失位置为圆心扩散
其实到这一步还是有个问题，就是波纹是向右下方扩散的，下面是笔者将动画时间增大10倍，以及将波纹动画中的属性的宽高增大10倍后的效果：
产生此效果的原因是此时只能达到雨滴与波纹两个属性左上角的点重合，如果要使波纹以水滴消失位置为圆心扩散，需要让两个元素的中心点重合。
修改代码，先去掉rotate（原因后面再说），再使用translate(-50%, -50%)将元素向左上方移动，使两个元素的中心点等于雨滴被移除时的位置。
.raindrop {
/* 将transform: rotateY(45deg)改为transform: translate(-50%, -50%)，其余不变*/
transform: translate(-50%, -50%);
/* ...... 其余的css不要删除*/
}
.ripple {
/* 将transform: rotateX(75deg)改为transform: translate(-50%, -50%)，其余不变*/
transform: translate(-50%, -50%);
/* ...... 其余的css不要删除*/
}
效果图：
此时已经达到了波纹以水滴消失位置为圆心扩散，但要是加入了rotate之后，效果就完全不一样了：
.raindrop {
/* 将transform: translate(-50%, -50%)改为transform: rotateY(45deg) translate(-50%, -50%)，其余不变*/
transform: rotateY(45deg) translate(-50%, -50%);
/* ...... 其余的css不要删除*/
}
.ripple {
/* 将transform: translate(-50%, -50%)改为transform: rotateX(75deg) translate(-50%, -50%)，其余不变*/
transform: rotateX(75deg) translate(-50%, -50%);
/* ...... 其余的css不要删除*/
}
效果图：
可以看出此时的波纹是向下方扩散，这是为什么呢？
让我们先看一段很简单的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>测试</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: #fe0000;
margin-top: 20px;
}
</style>
<body>
<div></div>
<div style="transform: rotateX(75deg);"></div>
</body>
</html>
效果图：
rotateX会改变元素的高度，但其并不会改变元素在rotateX前占据的位置的大小！！！所以当我们使用同时使用 rotate 和translate(-50%, -50%)时并达到预期的效果。
就比如上面的数据，元素的宽高皆为100px，将其rotateX(75deg)后，宽度不变，translateX(-50%）会将元素移动到Y轴的中心线上；但此时元素的高度已经变为25.88px，translateY(-50%)只能将其向上移动12.94px，实际上是需要向上移动50px才能达到X轴的中心线上。
就比如下图（尝试将看待元素的视角从XY转移到YZ）
A、B、C、D四条线，B的长度与A一致，AB之间的角度为45°，AD与CD之间皆为直角，那么根据正弦定理，C的长度等于B的长度的sin45°，也就是A的长度的sin45°。
元素rotateX(75deg)后，height由100px变为25.88，也就是：
100 * sin(90° - 75°)
= 100 * sin(15°)
= 100 * 0.25881904510252
≈ 100 * 0.2588
≈ 25.88
所以rotateY(45deg)
sin(45°)
= 0.70710678118655
≈ 0.71
要使雨滴达到rotateY(45deg)前 translateX(-50%)的效果，需要 translateX(-50% / 0.71) 约等于 translateX(-70%)，也就是：
.raindrop {
/* 将transform: rotateY(45deg) translate(-50%, -50%)改为transform: rotateY(45deg) translate(-70%, -50%)，其余不变*/
transform: rotateY(45deg) translate(-70%, -50%);
/* ...... 其余的css不要删除*/
}
rotateX(75deg)
sin(90° - 75°)
= sin(15°)
= 0.25881904510252
≈ 0.26
同理，要使波纹达到rotateX(75deg)前translateY(-50%)的效果，需要 translateY(-50% / 0.26) 约等于 translateY(-192%) ，也就是：
.ripple {
/* 将transform: rotateX(75deg) translate(-50%, -50%)改为transform: rotateX(75deg) translate(-50%, -192%)，其余不变*/
transform: rotateX(75deg) translate(-50%, -192%)
/* ...... 其余的css不要删除*/
}
效果图：
随后再递归调用dorpRain方法，即可生成批量的雨滴以及对应的波纹。
结尾
笔者才疏学浅，慌忙之下难免有遗漏或是疏忽，如有错误之处，还望各位看官不吝赐教，笔者在此感谢。
最终的代码我放在简单的下雨效果2.0。
作者：Fatman
博客园地址：https://www.cnblogs.com/liujingjiu
CSDN地址：https://blog.csdn.net/qq_35508835
版权归Fatman所有，欢迎保留原文链接进行转载：)
有趣的css—简单的下雨效果2.0版的更多相关文章
- 有趣的css—简单的下雨效果
简单的下雨效果 前言 最近在b站上看到一个下雨效果的视频,感觉思路很清奇,我也按照自己的思路做了一个简单的下雨效果. 由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点 ...
- 用PHP写的一个简单的分页类 1.0版
<?php /* 分页类 用于实现对多条数据分页显示 version:1.0 author:Knight E-Mail:S.Knight.Work@gmail.com Date:2013-10- ...
- 用PHP写的一个简单的分页类 2.0版
<?php /* 分页类 用于实现对多条数据分页显示 version:2.0 //基于1.0 数据库查询用mysqli实现 author:Knight E-Mail:S.Knight.Work@ ...
- 使用CSS实现一个简单的幻灯片效果
方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- Css实现一个简单的幻灯片效果页面
使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...
- css实现简单音乐符效果
css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 <!DOCTYPE html> <html lang="en&qu ...
- 3.8.1 HTML与CSS简单页面效果实例
HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
随机推荐
- 使用shell脚本替换Hadoop配置文件的值
因为懒汉式的实现是线程安全的,所以会降低整个访问速度,而且每次访问都要判断一次.有没有更好的方式实现呢?可以使用"双重检查枷锁"的方式来实现. 所谓"双重检查加锁&quo ...
- python打印9宫格25宫格81宫格.....
""" 2 问题描述: 3 给定一个奇数(num),生成一个横竖斜加起来的和相等 4 问题解析: 5 这其实就是一个九宫格的问题 6 九宫格问题的解答技巧: 7 1要放在 ...
- linuxc语言图形化编程包含gtk/gtk.h编译总是报错找不到该文件的解决方法
在编译时输入gcc file.c `pkg-config --libs --cflags gtk+-2.0` 注意`不是单引号,和--前均有一个字符 这样问题就结局啦
- 安装anaconda和第三方库tushare
安装anaconda和第三方库tushare 血泪教训 下载32位的anaconda(同你Python版本,不然会碰到第三方库无法import的问题) 安装anaconda 安装到C盘会比较快,安装到 ...
- 【体系结构】Oracle进程架构
Client Process的介绍 Client and Server Processes Client Process代表着客户端进程,每一个客户端进程关联着一个Server Process(服务器 ...
- 从新建文件夹开始构建UtopiaEngine（1）
序言 在苦等了半年多之后,我终于开始了向往已久的实时NPR游戏引擎项目--Utopia Engine,这半年多一直为了构建这个引擎在做很多准备:多线程.动态链接库.脚本引擎.立即渲染GUI--统统吃了 ...
- MyBatis工程搭建&MyBatis实现Mapper配置查询
一.MyMyBatis工程搭建 新建Maven项目:mybatis-demo 准备数据源 1 # 删除mybatis_demo数据库 2 drop database if exists mybatis ...
- Python - 关于类(self/cls) 以及 多进程通讯的思考
Python-多进程中关于类以及类实例的一些思考 目录 Python-多进程中关于类以及类实例的一些思考 1. 背景 2. Python 类中的函数 - staticmethod / classmet ...
- OO_Unit1总结
OO的第一单元作业告一段落,这周是总结而不是码代码,甚至心中有点落空感.OO课给我的一周构建了一个完整的循环,从周二的作业发布到接下来几天的思考和构建程序,再到面向中测进行一部分的bug修复,最后到互 ...
- Elasticsearch核心技术与实战,性能是真牛
Elasticsearch 是一款非常强大的开源搜索及分析引擎.结合 Kibana.Logstash和Beats,Elasticsearch 还被广泛运用在大数据近实时分析,包括日志分析.指标监控.信 ...