纯前端绘制的下雨效果

最新推荐文章于 2024-07-17 12:40:01 发布
最新推荐文章于 2024-07-17 12:40:01 发布
阅读量461 收藏
点赞数
分类专栏： CSS 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35241329/article/details/130733847
版权
这段代码展示了一个使用HTML和CSS实现的3D雨滴下落动画效果。页面背景为深色，包含多个具有不同延迟和位置参数的雨滴元素，通过CSS动画改变背景位置产生下雨的效果。此外，还包括一个固定在顶部的简洁头部导航链接。
摘要由CSDN通过智能技术生成

先上效果：
在这里插入图片描述
再上代码：

<!--黏糊糊的菜单-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after {
            padding: 0;
            margin: auto 4px;
            box-sizing: border-box;
        }

        body {
            background-color: #222;
            color: #fff;
            min-height: 100vh;
            display: grid;
            place-items: center;
            perspective: 1200px;
        }
        body *:not(:empty) {
            transform-style: preserve-3d;
        }

        .scene {
            position: relative;
        }

        .drop {
            position: absolute;
            left: 0;
            bottom: -25vh;
            width: 1px;
            height: 100vh;
            transform: translate3d(var(--tx, 0), 0, var(--tz, 0));
            transform-style: preserve-3d;
            background-image: linear-gradient(transparent 95vh, #def3);
            -webkit-animation: drop 12s var(--delay, 0s) ease-in infinite;
            animation: drop 12s var(--delay, 0s) ease-in infinite;
        }
        @-webkit-keyframes drop {
            0%, 75% {
                background-position-y: 5vh;
            }
            100% {
                background-position-y: 105vh;
            }
        }
        @keyframes drop {
            0%, 75% {
                background-position-y: 5vh;
            }
            100% {
                background-position-y: 105vh;
            }
        }
        .drop:nth-child(1) {
            --delay: 0s;
            --tx: 8.75vmin;
            --tz: 4.25vmin;
        }
        .drop:nth-child(2) {
            --delay: -0.25s;
            --tx: -13.25vmin;
            --tz: 7.75vmin;
        }
        .drop:nth-child(3) {
            --delay: -0.5s;
            --tx: 11.75vmin;
            --tz: -21.75vmin;
        }
        .drop:nth-child(4) {
            --delay: -0.75s;
            --tx: 22.75vmin;
            --tz: -13.25vmin;
        }
        .drop:nth-child(5) {
            --delay: -1s;
            --tx: -22.25vmin;
            --tz: 0vmin;
        }
        .drop:nth-child(6) {
            --delay: -1.25s;
            --tx: 4.5vmin;
            --tz: -8.25vmin;
        }
        .drop:nth-child(7) {
            --delay: -1.5s;
            --tx: 7.5vmin;
            --tz: -1.75vmin;
        }
        .drop:nth-child(8) {
            --delay: -1.75s;
            --tx: 8.25vmin;
            --tz: 17vmin;
        }
        .drop:nth-child(9) {
            --delay: -2s;
            --tx: 4.5vmin;
            --tz: 4.5vmin;
        }
        .drop:nth-child(10) {
            --delay: -2.25s;
            --tx: -13.5vmin;
            --tz: -19.75vmin;
        }
        .drop:nth-child(11) {
            --delay: -2.5s;
            --tx: 2.5vmin;
            --tz: -20vmin;
        }
        .drop:nth-child(12) {
            --delay: -2.75s;
            --tx: 9vmin;
            --tz: -6.75vmin;
        }
        .drop:nth-child(13) {
            --delay: -3s;
            --tx: -8.5vmin;
            --tz: 8.25vmin;
        }
        .drop:nth-child(14) {
            --delay: -3.25s;
            --tx: -24.75vmin;
            --tz: -16.5vmin;
        }
        .drop:nth-child(15) {
            --delay: -3.5s;
            --tx: -21vmin;
            --tz: -1vmin;
        }
        .drop:nth-child(16) {
            --delay: -3.75s;
            --tx: -2.25vmin;
            --tz: 9.75vmin;
        }
        .drop:nth-child(17) {
            --delay: -4s;
            --tx: 17vmin;
            --tz: 6vmin;
        }
        .drop:nth-child(18) {
            --delay: -4.25s;
            --tx: 1.75vmin;
            --tz: -22vmin;
        }
        .drop:nth-child(19) {
            --delay: -4.5s;
            --tx: 18.5vmin;
            --tz: 7.75vmin;
        }
        .drop:nth-child(20) {
            --delay: -4.75s;
            --tx: -19vmin;
            --tz: -20vmin;
        }
        .drop:nth-child(21) {
            --delay: -5s;
            --tx: -23.5vmin;
            --tz: 13vmin;
        }
        .drop:nth-child(22) {
            --delay: -5.25s;
            --tx: -10vmin;
            --tz: -4.5vmin;
        }
        .drop:nth-child(23) {
            --delay: -5.5s;
            --tx: 21.25vmin;
            --tz: -6.75vmin;
        }
        .drop:nth-child(24) {
            --delay: -5.75s;
            --tx: 11vmin;
            --tz: 6.75vmin;
        }
        .drop:nth-child(25) {
            --delay: -6s;
            --tx: -10.75vmin;
            --tz: 14.25vmin;
        }
        .drop:nth-child(26) {
            --delay: -6.25s;
            --tx: -10.75vmin;
            --tz: 5vmin;
        }
        .drop:nth-child(27) {
            --delay: -6.5s;
            --tx: 8vmin;
            --tz: 4.75vmin;
        }
        .drop:nth-child(28) {
            --delay: -6.75s;
            --tx: -13.5vmin;
            --tz: -11.25vmin;
        }
        .drop:nth-child(29) {
            --delay: -7s;
            --tx: 14.25vmin;
            --tz: 14.75vmin;
        }
        .drop:nth-child(30) {
            --delay: -7.25s;
            --tx: 25vmin;
            --tz: -11.25vmin;
        }
        .drop:nth-child(31) {
            --delay: -7.5s;
            --tx: 1.5vmin;
            --tz: -19.75vmin;
        }
        .drop:nth-child(32) {
            --delay: -7.75s;
            --tx: 12.25vmin;
            --tz: -15vmin;
        }
        .drop:nth-child(33) {
            --delay: -8s;
            --tx: -23.25vmin;
            --tz: 11.75vmin;
        }
        .drop:nth-child(34) {
            --delay: -8.25s;
            --tx: -1.75vmin;
            --tz: 21.5vmin;
        }
        .drop:nth-child(35) {
            --delay: -8.5s;
            --tx: -12.25vmin;
            --tz: 14vmin;
        }
        .drop:nth-child(36) {
            --delay: -8.75s;
            --tx: -2.75vmin;
            --tz: 12.25vmin;
        }
        .drop:nth-child(37) {
            --delay: -9s;
            --tx: 15vmin;
            --tz: 16vmin;
        }
        .drop:nth-child(38) {
            --delay: -9.25s;
            --tx: -3vmin;
            --tz: 6.75vmin;
        }
        .drop:nth-child(39) {
            --delay: -9.5s;
            --tx: -5.5vmin;
            --tz: -23.75vmin;
        }
        .drop:nth-child(40) {
            --delay: -9.75s;
            --tx: 13.5vmin;
            --tz: 24.75vmin;
        }
        .drop:nth-child(41) {
            --delay: -10s;
            --tx: -12.25vmin;
            --tz: 3.25vmin;
        }
        .drop:nth-child(42) {
            --delay: -10.25s;
            --tx: -13vmin;
            --tz: 3.75vmin;
        }
        .drop:nth-child(43) {
            --delay: -10.5s;
            --tx: 14.5vmin;
            --tz: -21.5vmin;
        }
        .drop:nth-child(44) {
            --delay: -10.75s;
            --tx: 14vmin;
            --tz: 4.5vmin;
        }
        .drop:nth-child(45) {
            --delay: -11s;
            --tx: 23.25vmin;
            --tz: -12vmin;
        }
        .drop:nth-child(46) {
            --delay: -11.25s;
            --tx: 20.75vmin;
            --tz: 21vmin;
        }
        .drop:nth-child(47) {
            --delay: -11.5s;
            --tx: -24.75vmin;
            --tz: 21.75vmin;
        }
        .drop:nth-child(48) {
            --delay: -11.75s;
            --tx: -21vmin;
            --tz: -0.25vmin;
        }
        .drop::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60vmin;
            height: 60vmin;
            background-image: radial-gradient(closest-side, transparent, #def, transparent, #eff, transparent, #def, transparent);
            -webkit-animation: waves 12s calc(var(--delay, 0s) - 0.36s) linear infinite;
            animation: waves 12s calc(var(--delay, 0s) - 0.36s) linear infinite;
        }
        @-webkit-keyframes waves {
            0% {
                transform: translate(-50%, 50%) rotateX(-90deg) scale(0);
                opacity: 0.05;
            }
            100% {
                transform: translate(-50%, 50%) rotateX(-90deg) scale(2);
                opacity: 0;
            }
        }
        @keyframes waves {
            0% {
                transform: translate(-50%, 50%) rotateX(-90deg) scale(0);
                opacity: 0.05;
            }
            100% {
                transform: translate(-50%, 50%) rotateX(-90deg) scale(2);
                opacity: 0;
            }
        }
        header {
            top:0;
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0;
            width: 100%;
            z-index: 3;
            height: 7em;
            font-family: "Bebas Neue", sans-serif;
            font-size: clamp(0.66rem, 2vw, 1rem);
            letter-spacing: 0.5em;
        }

        a{
            color: #eeffff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<header>
    <div>Animated Sections</div>
    <div><a href="https://blog.csdn.net/qq_35241329?type=blog">Original By TiMi先生</a></div>
</header>
<div class="scene">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>

</body>
</html>
timi先生
关注
专栏目录
cesium 局部下雨效果
God's asylum的博客
08-18 75
1、添加一个矩形，获取矩形长宽高属性值，和中心点属性值。2、运用cesium 中粒子系统“ParticleSystem”方法添加局部雨效果。
canvas下雨打雷效果
m0_46597790的博客
06-15 1915
canvas下雨打雷效果 废话不多说，代码走起 *html部分* <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>canvas下雨打雷效果</title> <link rel="stylesheet" href="css/style.css"> </head> <body onres
前端--canvas实现漂亮的下雨效果
fumushan的博客
11-30 1725
说明 这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。  效果图  解释 看图来分析下，我们需要实现哪些效果。  1、雨滴下落效果，移动鼠标控制下落方向  2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同  3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同 好的，我们把整个效果大致拆分成三个效果，实现这三个效果，...
Three.js 下雨特效（高级版本）很干！很难！很详细！
最新发布
程序员成长指北
07-17 248
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群带深度信息的下雨特效的实现效果不错，实现的每一步真的很清楚。阅读之前简略了解一下原理1. 什么是深度？深度，深度，深度就是三维世界中的坐标点，经过 MVP(modelMatrix viewMatrix projectionMatrix) 变化后，映射到相机空间的坐标中的 z 值范围 [0,1]...
前端实现落雨+涟漪效果
Bxy_123456789的博客
06-02 523
雨滴的样式其实是宽1像素，高度不同的白色长方块，下落的动画都是相同的，通过改变长方块的高度，透明度以及动画发生的时间呈现出参差不齐的效果，从而达成落雨的效果，详见下方代码。话不多说，先看视频，满足所需再往下撸代码（以下代码均基于vue3）此效果由两部分组成，落雨+涟漪。
css流星雨
m0_51700376的博客
12-09 930
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css
前端入门（雨滴特效，css）
gronkie的博客
01-15 2218
（看着别人的做的，yysy视频讲的真的好详细，像我这种小白都能听懂了雨滴特效） 大概思路就是，把每个雨滴看作是一个宽为 5px ， 长为 30px 的 div，然后用 js 创建窗口大小 / 5 个数量的雨滴，然后设置位置，让它们按行摆开（就是铺满） 然后给它们赋予一个图像渐变属性 linear-gradient，让图像看起来是从透明渐变为一个随机颜色，再把雨滴的前端设置为圆形的（让它看起来像是一个雨滴，虽然很丑） 最后设置一个动画效果，让雨滴从屏幕上方移动到屏幕下方直到看不见，循环进行该动画，给雨滴设置一
HTML5下雨加闪电动画场景特效特效代码
03-20
下雨效果的实现通常会涉及到多个独立的粒子（雨滴）系统，每个粒子都有自己的位置、速度和方向。开发者会用JavaScript循环遍历这些粒子，根据时间更新它们的状态，然后在Canvas上绘制出来，形成连续的运动效果。雨滴...
js操作canvas实现好看的黑客帝国代码下雨的效果
12-30
在这个项目中，我们将探讨如何利用JavaScript操纵Canvas来实现一种经典的效果——"黑客帝国"代码下雨效果。这个效果是通过在Canvas上连续绘制下落的字符，模拟出屏幕上下雨般的视觉体验。 首先，我们需要在HTML中...
H5 Canvas下雨特效
01-22
通过学习和实践这个“H5 Canvas下雨特效”，开发者不仅可以掌握Canvas的基本绘图方法，还能了解到如何通过JavaScript实现复杂的动态效果，提升Web前端的动态视觉设计能力。同时，这也能帮助开发者理解Web动画原理和...
H5打雷下雨闪电动画特效
06-24
打雷下雨闪电动画特效通常会利用Canvas来绘制雨滴、雷电等元素，并通过定时器更新画面，实现连续的动画效果。每一帧的绘制都需要精确计算，以确保动画流畅且真实。 三、CSS3动画 CSS3提供了过渡（transition）和...
HTML5天气预报动画特效
04-25
HTML5天气预报动画特效是一款交互式天气卡片，打雷下雨下雪刮风晴天等五种天气预报动画特效。
html5带日期和动画场景的天气预报特效
06-12
一款基于HTML5 SVG和snap.svg的超酷天气预报卡片设计效果html5带日期和动画场景的天气预报特效代码。
纯H5+CSS3实现下雨特效
weixin_58459702的博客
07-28 750
纯H5+CSS3实现下雨特效
用PHP来模拟雨滴的动态效果
elirlove1的博客
01-10 824
这段代码创建了一个简单的黑色背景容器，用于模拟雨滴下落的效果。通过JavaScript，我们使用。函数在页面上随机位置生成雨滴，并使用CSS样式来设置雨滴的大小、颜色和透明度。函数每100毫秒重新生成雨滴，以创建动态效果。
html 闪电的动态效果图,HTML5 CSS3实现的街道雷雨闪电动画
weixin_39736047的博客
06-08 453
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;backgro...
HTML5暴风雨雷雨闪电js特效
ICode联盟
10-18 545
下载地址 HTML5暴风雨雷雨闪电特效是一款基于html5+css3属性制作的暴雨，雨滴掉落，电雨交加下雨动画特效。 dd:
web前端入门到实战：纯css制作电闪雷鸣的天气图标
软件开发-前端开发-IT
09-21 462
效果 效果图如下 实现思路 使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了，这些都是在css中定义的。 <div class="container"&gt...
彩虹雨源码
weixin_33782386的博客
06-05 2287
<!doctype html><html><head><meta charset="utf-8"><title>彩虹雨</title> <style>canvas{ position:absolute; top:0; left:0; background-color:black;}</style&g...
Android SurfaceView实现下雨动画效果详解
本文将探讨如何在Android应用中利用SurfaceView实现逼真的下雨天气动画效果，同时深入理解SurfaceView与普通View的区别以及SurfaceView在多线程渲染中的优势。 ### SurfaceView与View的区别 1. **绘制线程**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

timi先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值