漫天流星特效html和css动态效果(附代码)

2023-10-17 09:20

本文主要是介绍漫天流星特效html和css动态效果(附代码),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

漫天流星

效果如下图:

请添加图片描述
文件目录:
在这里插入图片描述

html代码如下:
index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>漫天流星雨</title><link rel="stylesheet" type="text/css" href="index.css"/></head><body><div class="container"><div class="line" style="--color:#ec3e27;--x:3;--z:3;--d:1;"></div><div class="line" style="--color:#fff;--x:3;--z:2;--d:2;"></div><div class="line" style="--color:#fff;--x:4;--z:1;--d:3;"></div><div class="line" style="--color:#fd79a8;--x:4;--z:0;--d:1;"></div><div class="line" style="--color:#fff;--x:6;--z:-1;--d:2;"></div><div class="line" style="--color:#0984e3;--x:6;--z:-2;--d:3;"></div><div class="line" style="--color:#fff;--x:8;--z:-3;--d:1;"></div><div class="line" style="--color:#fff;--x:10;--z:-4;--d:2;"></div><div class="line" style="--color:#fff;--x:12;--z:-5;--d:3;"></div><div class="line" style="--color:#fff;--x:14;--z:-6;--d:1;"></div><div class="line" style="--color:#fff;--x:16;--z:-7;--d:2;"></div><div class="line" style="--color:#fff;--x:18;--z:-8;--d:3;"></div><div class="line" style="--color:#e056fd;--x:20;--z:-9;--d:1;"></div></div></body>
</html>

css代码如下:
index.css

:root {--background-color: #2c3e50;--border-color: #7591AD;--text-color: #34495e;--color1: #ec3e27;--color2: #fd79a8;--color3: #0984e3;--color4: #00b894;--color5: #fdcb6e;--color6: #e056fd;--color7: #F97F51;--color8: #BDC581;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;/* font-family: 'Times New Roman', Times, serif; */
}.channel {position: absolute;width: 80%;text-align: center;top: 50%;left: 50%;transform: translate(-50%, -200px);font-size: 30px;font-weight: bold;color: #fff;z-index: 999;
}.container {position: relative;width: 100vw;height: 100vh;background-color: #000;overflow: hidden;display: flex;justify-content: center;align-items: center;perspective: 800px;/* perspective-origin: left bottom; */transform-style: preserve-3d;}.line {position: absolute;width: 200px;height: 3px;border-radius: 3px;/* background-color: #fff; */background-image: linear-gradient(to right, var(--color), #ffffff50, transparent);animation: down 1s linear infinite both;animation-delay: calc(var(--d) * 0.3s);}.line::before,
.line::after {position: absolute;content: "";width: inherit;height: inherit;background-image: inherit;}.line::before {filter: blur(5px);
}.line::after {filter: blur(10px);
}@keyframes down {0% {transform: translateY(calc(var(--z) * 60px)) translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * 100px));}100% {transform: translateY(calc(var(--z) * 60px))translateZ(calc(var(--z) * 100px)) rotate(-45deg) translateX(calc(var(--x) * -100px));}
}

请添加图片描述

这篇关于漫天流星特效html和css动态效果(附代码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/224411

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像