html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css—简单的下雨效果2.0版
推荐 原创
Fatman_2021-05-18 13:37:36©著作权
文章标签
css
阅读数
1119
©著作权归作者所有:来自51CTO博客作者Fatman_的原创作品,如需转载,请注明出处,否则将追究法律责任
https://blog.51cto.com/u_15182950/2783359
# 简单的下雨效果2.0版
## 前言
笔者上一篇发布的文章[有趣的css—简单的下雨效果](https://www.cnblogs.com/liujingjiu/p/14775653.html)中有位老哥给我提了一个很棒的建议,大致意思是**波纹应该产生于雨滴的消失处**。
这是按照老哥的建议完善后的效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/202105171700529.gif#pic_center)
由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点点卡顿,实际的效果比图片还是要好一些的,点击[这里](http://htmlpreview.github.io/?https://github.com/iamliujingjiu/code/blob/main/%E7%AE%80%E5%8D%95%E7%9A%84%E4%B8%8B%E9%9B%A8%E6%95%88%E6%9E%9C2.0/demo.html)可以在线查看2.0版的效果。
## 思路
### 制作背景
首先给body中添加一个id为rain的div,并通过背景颜色线性渐变得到**天空-地平线-海面**的效果。
```html
简单的下雨效果2.0
```
```css
#rain {
position: relative;
height: 100%;
background: linear-gradient(#333,#999 ,#1f4794);
background-repeat: no-repeat;
background-size: 100% 100%;
}
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517170612836.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTA4ODM1,size_16,color_FFFFFF,t_70)
### 制作雨滴
通过设置背景颜色径向渐变得到圆形的水滴,再将其沿Y轴进行旋转得到椭圆形的水滴,最后给其添加水滴下落的动画效果。
```css
.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%;}
}
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210516160147281.gif#pic_center)
### 制作波纹效果
通过背景透明和圆形边框得到圆形的环,再将其沿X轴进行旋转得到椭圆形的环,最后给其添加环逐渐扩大的动画效果。
```css
.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;
}
}
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210516161601637.gif#pic_center)
### 在雨滴被移除的位置添加波纹
通过计算移除雨滴的随机时间得到雨滴消失时距离顶部的距离。
```javascript
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();
}
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517214153167.gif#pic_center)
### 使波纹以水滴消失位置为圆心扩散
其实到这一步还是有个问题,就是波纹是向右下方扩散的,下面是笔者将动画时间增大10倍,以及将波纹动画中的属性的宽高增大10倍后的效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021051721580686.gif#pic_center)
产生此效果的原因是此时只能达到雨滴与波纹两个属性左上角的点重合,如果要使波纹以水滴消失位置为圆心扩散,需要让两个元素的中心点重合。
修改代码,先去掉rotate(原因后面再说),再使用translate(-50%, -50%)将元素向左上方移动,使两个元素的中心点等于雨滴被移除时的位置。
```css
.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不要删除*/
}
```
效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517220614497.gif#pic_center)
此时已经达到了波纹以水滴消失位置为圆心扩散,但要是加入了rotate之后,效果就完全不一样了:
```css
.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不要删除*/
}
```
效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517221113665.gif#pic_center)
可以看出此时的波纹是向下方扩散,这是为什么呢?
让我们先看一段很简单的代码:
```html
测试
```
效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517221500720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTA4ODM1,size_16,color_FFFFFF,t_70)
**rotateX会改变元素的高度,但其并不会改变元素在rotateX前占据的位置的大小!!!所以当我们使用同时使用 rotate 和translate(-50%, -50%)时并达到预期的效果。**
**就比如上面的数据,元素的宽高皆为100px,将其rotateX(75deg)后,宽度不变,translateX(-50%)会将元素移动到Y轴的中心线上;但此时元素的高度已经变为25.88px,translateY(-50%)只能将其向上移动12.94px,实际上是需要向上移动50px才能达到X轴的中心线上。**
就比如下图(**尝试将看待元素的视角从XY转移到YZ**)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517222930340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTA4ODM1,size_16,color_FFFFFF,t_70)
**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%)**,也就是:
```css
.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%)** ,也就是:
```css
.ripple {
/* 将transform: rotateX(75deg) translate(-50%, -50%)改为transform: rotateX(75deg) translate(-50%, -192%),其余不变*/
transform: rotateX(75deg) translate(-50%, -192%)
/* ...... 其余的css不要删除*/
}
```
效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210517225624379.gif#pic_center)
随后再递归调用dorpRain方法,即可生成批量的雨滴以及对应的波纹。
## 结尾
笔者才疏学浅,慌忙之下难免有遗漏或是疏忽,如有错误之处,还望各位看官不吝赐教,笔者在此感谢。
最终的代码我放在[简单的下雨效果2.0](https://github.com/iamliujingjiu/code/tree/main/%E7%AE%80%E5%8D%95%E7%9A%84%E4%B8%8B%E9%9B%A8%E6%95%88%E6%9E%9C2.0)。
> herf="https://www.cnblogs.com/liujingjiu">Fatman所有,欢迎保留原文链接进行转载:)
打赏
1赞
收藏
1评论
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版相关推荐
- 有趣的css—简单的下雨效果
简单的下雨效果 前言 最近在b站上看到一个下雨效果的视频,感觉思路很清奇,我也按照自己的思路做了一个简单的下雨效果. 由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点 ...
- html背景只向x轴扩散,CSS3实现任意图片lowpoly动画效果实例
这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3 transform属性的rotate旋转,translate移动,scale缩放,CSS代码部分非常简 ...
- html背景只向x轴扩散,地球化学(复习资料)
第一章 1.克拉克值:元素在地壳中的丰度,称为克拉克值.元素在宇宙体或地球化学系统中的平均含量称之为丰度.丰度通常用重量百分数(%),PPM(百万分之一)或g/t表示. 2.富集矿物:指所研究元素在其 ...
- R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体)
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体) 目录
- R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置y轴的标签文本使用粗体字体)
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置y轴的标签文本使用粗体字体) 目录
- R语言ggplot2可视化:使用element_text函数设置轴标题文本为粗体字体(Bold Font,只设置Y轴的标题文本使用粗体字体)
R语言ggplot2可视化:使用element_text函数设置轴标题文本为粗体字体(Bold Font,只设置Y轴的标题文本使用粗体字体) 目录
- R语言ggplot2可视化:使用element_text函数设置轴标题文本为粗体字体(Bold Font,只设置X轴的标题文本使用粗体字体)
R语言ggplot2可视化:使用element_text函数设置轴标题文本为粗体字体(Bold Font,只设置X轴的标题文本使用粗体字体) 目录
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 原文:谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画! 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到 ...
- html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的 取值: 具体单词 rgb rgba 106进制 快捷键: bc ...
最新文章
- IT界顶级大咖讲解如何获得月薪5万以上的秘诀干货!
- bash: 无法为立即文档创建临时文件: 权限不够_世界顶级Linux大牛耗时三年总结出3000页Linux文档...
- 三角剖分(delaunay)拓扑结构 高维近邻
- 使用python实现GBK转unicode码查询表
- vue.js嵌套路由-------由浅入深
- opencv1-安装及资料
- c语言健身房会员管理系统,健身房会员管理系统c#.net
- [转]上海新东方vs新东方,SEO实战
- Python求1~300之间所有的完数
- java文件的打包和解包,Java包装类:什么是包装类对象,什么是打包和解包,当编译遇到自动打包和解包时会发生什么?...
- jsp html在线编辑器,JSP实用教程之简易页面编辑器的实现方法(附源码)
- 第七周 项目4 - 队列数组
- 获取开源医学文献图片(PubMed)制成数据集
- Opensource Licenses
- GVRP基础配置【eNSP实现】
- 水下SLAM论文!!!
- Couldn‘t terminate the existing process for com.hopechart.gallery
- ECSHOP模板堂商品最小起订量插件
- windows中使用钩子拦截消息
- java中的JDBC是什么
热门文章
- libevent:信号、超时、回调
- 用libconfig读取配置文件
- OpenGL学习笔记:第一个OpenGL程序完全注释
- Django视图层:URL的反向解析(主路由include之namespace,子路由之name,模板标签{%url%},视图reverse()函数,反向解析示例,URL命名空间
- netty大白话(四)
- netty大白话--字符串的收发(三)
- Unity+SenseAR教程 | 用手势发射爱心2:加入发射方向【源码】
- 免费旅游项目html,HTML+CSS+JavaScript项目2 “说旅游”专题页制作_0518_连蕊.pptx
- Cake Frosting:更具可维护性的C#DevOps
- 面向初学者的带有MVC API的Android 管理表CRUD MSSQL