通过css3实现烟雾效果

最新推荐文章于 2025-05-20 12:43:57 发布

MaxLoongLvs

最新推荐文章于 2025-05-20 12:43:57 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css3 css javascript

本文链接：https://blog.youkuaiyun.com/shadowfall/article/details/123560936

本文介绍了如何使用CSS3创建一个有趣的动画效果，当鼠标悬停在文字上时，文字会变为‘做梦’并消散成烟雾，一段时间后自动还原。代码示例详细展示了实现这一动画的步骤，包括将文字拆分为单独的span元素，添加和移除特定类以触发动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何通过css3实现让富婆爱上我

应粉丝要求，如何让富婆爱上我，快来试一试吧！

使用CSS3实现动画-触碰即消散，并可自己还原的烟雾文字效果

效果图

在这里插入图片描述

效果实现代码

<!DOCTYPE html>
<html>
	<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>富婆宝典</title>
	<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<section>
			<div class="warpper">
				<h1 contenteditable data-heading="如何让富婆爱上我" class="text">
					如何让富婆爱上我
				</h1>
			</div>

		</section>
		<script type="text/javascript">
			// 1.得到伪数组
			const texts = document.querySelector('.text');
			// 2.通过replace方法配合正则为每个匹配字符包裹标签span（通过替换）
			texts.innerHTML = texts.textContent.replace(/\S/g,'<span>$&</span>');//这里span忘了闭合，直接栈溢出了
			// 3.给每个span标签绑定点击事件，先得到所有标签
			const letters = document.querySelectorAll('span');
			let goBackTime = 2;
			// 4.循环遍历，绑定事件
			let content = []
			for(let i=0;i<letters.length;i++){
				// 5.要通过添加监听来添加事件，下面这段是会报错的，因为长度改变！
				// letters[i].onmouseover = function(){
				// 	letters[i].className.add('active');
				// console.dir(texts.innerHTML);
				content.push(letters[i].innerText)
				letters[i].addEventListener('mouseover',function(){

					letters[i].classList.add('active');
					letters[i].classList.add('active'+i);
					letters[i].innerText = "做梦"
				setTimeout(()=>{
				let letter = document.querySelector('.active'+i);
				letter.classList.remove('active');//对所有的active都清除，不循环遍历
				letter.classList.add('show');//为每一个都加上show类名
				letters[i].innerText = content[i]
			},goBackTime*1000);})
			}

		</script>
	</body>
</html>

body{
	margin: 0;
	padding: 0;
}
section{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background-image: url(../img/2.jpg);
	background-size: 100% 100%;
	background-position: center center;
	overflow: hidden;
}
.warpper {
	width: 100%;
	font-family: 'Source Code Pro', monospace;
	margin: 0 auto;
	height: 100%;
}
.warpper h1{
	text-transform: uppercase;
	transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
	font-size: 4vw;
	top: 50%;
	left: 50%;
	margin: 0;
	position: absolute;
	text-rendering: optimizeLegibility;
	font-weight: 900;
	color: #FFFFFF;
	text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
	white-space: nowrap;
}
section .text span{
	position: relative;
	cursor: pointer;
	display: inline-block;
}
section .text span.active{
	animation: smoke 2s linear forwards;
	transform-origin: bottom;
}
.show{
    animation: show-letter .5s linear forwards;
}

@keyframes show-letter{
    0%{
        opacity: 0;
		filter: blur(20);
        transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
    }
    100%{
        opacity: 1;
		filter: blur(0);
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes smoke{
	0%{
		opacity: 1;
		filter: blur(0);
		transform: translateX(0) translateY(0) rotate(0deg) scale(1);
	}
	80%{
		opacity: 0;
		filter: blur(20px);
		transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
	}
	100%{
		opacity: 1;
		filter: blur(0);
	}
}