【前端】烟雾文字效果（html +js）

视频效果演示：

【css+js】烟雾文字效果

全部代码：

<!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>Document</title>
</head>
<style>body{background: rgb(2, 9, 43);}section{position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;overflow: hidden;}.text{position: relative;width: 370px;text-align: center;line-height: 5vh;color: white;}section>.text>span{position: relative;display: inline-block;cursor: pointer;}section>.text>span.active{animation: smoke 2s linear forwards;}@keyframes smoke {0%{opacity: 1;filter: blur(0);transform: translateX(0) translateY(0) rotate(0deg) scale(1);}100%{opacity: 0;filter: blur(30px);transform: translateX(300px) translateY(-300px) rotate(720deg) scale(5);}}
</style>
<body><section><p class="text">要控制住自己，最坏的情绪不该带给最重要的人。以此轮皎洁的明月，共祝我们拥有长久的欢喜与美梦。这路遥马急的人间，你我平安喜乐就好。</p></section></body><script>const text = document.querySelector('.text');text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>");const lrtters = document.querySelectorAll("span");for(let i = 0; i<lrtters.length; i++){lrtters[i].addEventListener('mouseover',function(){lrtters[i].classList.add('active')})}
</script>
</html>

【前端】烟雾文字效果（html +js）相关推荐

CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...
js打印html5,控制台打印文字效果js插件-typed.js
typed.js是一款模拟控制台打印文字效果的js插件.typed.js可以自由的控制要打印的文字,以及打印的速度等,可以制作出逼真的打印文字效果. 安装可以通过bower来安装typed.js插件 ...
photoshop多选文字_60多个Photoshop文字效果教程
从食物,草和水到复古,发光或哈利波特,在Photoshop中创建文字效果的可能性是无限的. 但是,作为图形设计师,您确实需要一些指导或灵感来设计创意文本效果–对于这种情况,在线教程是最佳的来源. 好吧 ...
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果简介:本文是一个前端案例的讲解,关于如何用html+css+js制作出逐渐显示出文字的效果,这个效果可以帮助大家在新人面前装一波. 效果展示效果就是这个样子 ...
Three.js中的3D文字效果
对于一些设计网页中经常会出现一些3D的文字效果,本文将利用Three.js实现各种动画WebGL文本输入效果. 示例效果原文章文本采样通常情况下,文本网格是2D的平面形状,我们所要实现的3D文本 ...
模仿百度js浏览器控制台输出图片+文字效果
简介模仿百度js浏览器控制台输出图片+文字效果演示代码 if (window.console) {var cons = console;if (cons) {cons.log("%c\ ...
前端实现input标签输入框密码框显示文字效果
背景:各种登录网址账号密码输入框中的显示文字效果,当点击输入框时,显示的文字消失,当离开输入框后再次显示默认的文字思路:采用 input 标签,给它设置 CSS 样式,这里本人将两个 input 标 ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
ztext - 简单几行代码创建酷炫 3D 特效文字的开源 JS 库
把网页上的文字变成酷炫的 3D 风格,还能制作旋转动效,有了 ztext.js,只需要几行代码. ztext 能做什么 ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库,让开 ...

【前端】烟雾文字效果（html +js）

【前端】烟雾文字效果（html +js）相关推荐

最新文章

热门文章