CSS3 霓虹灯文字

最新推荐文章于 2024-08-15 23:19:32 发布

福州司马懿

最新推荐文章于 2024-08-15 23:19:32 发布

阅读量1.4k

点赞数

分类专栏： # CSS3 动画

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/100145952

版权

CSS3 动画专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在这里插入图片描述
transform对行内元素无效，可以使用变换（transform）的元素必须是块级元素或者原子内联级元素。单纯的内联元素是不能应用变换的，因此必须把span转成行内块。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
body {
	/**
	利用flex布局，让内容居中显示
	*/
    display: flex;
	
	/**
	flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
	*/
    align-items: center;
	
	/**
	flex子项在flex容器的当前行的主轴（横轴）方向上的对齐方式
	*/
    justify-content: center;
	
	/**
	vw/vh指的是相对视口（即浏览器窗口的百分比大小）
	*/
    height: 100vh;
	
	background-color: black;
}
.neonlight {
	font-size: 10vw;
    color: snow;
}
.neonlight span {
	/**
	transform对行内元素无效，可以使用变换（transform）的元素必须是块级元素或者原子内联级元素，
	单纯的内联元素是不能应用变换的，因此必须把span转成行内块。
	*/
	display: inline-block;
	
	/**
	animation-name				动画名称（配合@keyframes使用）
	animation-duration			动画持续时间
	
	animation-timing-function	动画过渡类型
								linear			线性过度
								ease 			平滑过渡
								ease-in			由慢到快
								ease-out		由快到慢
								ease-in-out		由慢到快又变慢
								steps(n, start/end)	阶跃函数，
													第一个参数表示将动画分为几段，
													第二个参数表示阶跃的时机。
								step-start		等同于steps(1, start); 
								step-end		等同于steps(1, end); 
								cubic-bezier	两个控制点的贝塞尔曲线
								
	animation-delay				动画延迟
	animation-iteration-count	动画循环次数(infinite，表示循环播放)
	
	animation-direction			动画正放(normal)还是倒放(alternate)
								normal				正常播放
								reverse				反向播放
								alternate			动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
								alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
								initial				保持其初始值
								inherit				从父元素继承
							
	animation-fill-mode			动画不播放时的状态
								none 		不改变默认行为
								forwards 	当动画完成后，保持最后一个属性值
								backwards 	在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值
								both 		向前和向后填充模式都被应用
								
	animation-play-state		动画播放(running)和暂停(paused)
	*/
    animation: neon 2s ease-in-out both infinite;
}

/** 
文字阴影：边框、正上方、左下、右下 
橘色：上+右下	左下		无
黄色：左下		无			上+右下
青色：无		上+右下		左下
可以看到，这三种颜色，在每个阶段其实只有两种，而且是以同样的规律在循环
*/
@keyframes neon {
    0%, 100% {
        text-shadow: 0 0 8px snow, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato;
        transform: scale(0.95);
    }
    33% {
        text-shadow: 0 0 8px snow, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan;
    }
    50% {
        transform: scale(1.05) translateX(2vw);
    }
    66% {
        text-shadow: 0 0 8px snow, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow;
    }
}
</style>
<script>
const duration = 2;
const str = "Neon Light";
const len = str.length;
const part = duration / len;

//es6的lambda表达式，对匿名函数的调用进行简写
window.onload=()=>init();
function init() {
	const neonlights = document.getElementsByClassName("neonlight");
	//for/of是对数组中的元素进行遍历，for/in是依次获取每一项的索引
	for(const neonlight of neonlights) {
		for(const s of str) {
			const span = document.createElement("span");
			span.innerHTML = s;
			neonlight.appendChild(span);
		}
	}
	//在html的头部新增一个样式表，用来规定每一个文字的延迟
	const style = document.createElement("style");
	for(let i=1,delay=-part;i<=len;i++,delay-=part) {
		style.innerHTML += ".neonlight span:nth-child("+i+"){animation-delay:"+delay+"s;}"
	}
	document.head.appendChild(style);
	
}
</script>
</head>
<body>
<div class="neonlight"></div>
</body>
</html>