css3-炫酷光影加载效果

css3炫酷光影加载效果,周围带有颜色变化，颜色 是 由 黑色 变成 白色 这种过程。同时，有一个模糊效果。还有一个从左到右的光影移动的效果。从光影“没有 ”到 “有”。

html:

		<h1>
			<span>L</span>
			<span>o</span>
			<span>a</span>
			<span>d</span>
			<span>i</span>
			<span>n</span>
			<span>g</span>
			<span>.</span>
			<span>.</span>
			<span>.</span>
		</h1>

css:

		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				font-style: normal;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			body{
				display: flex;
				/* 项目水平居中 */
				justify-content: center;
				/* 项目垂直居中 */
				align-items: center;
				font-family: consolas,Arial, Helvetica, sans-serif;
				background-color: #000;
			}
			h1{
				color: #fff;
				font-size: 8em;
				display: flex;
			}
			
			h1 span{
				animation: animate1 1s linear infinite;
			}
			h1 span:nth-child(1){animation-delay: 0s;}
			h1 span:nth-child(2){animation-delay: 0.1s;}
			h1 span:nth-child(3){animation-delay: 0.2s;}
			h1 span:nth-child(4){animation-delay: 0.3s;}、
			h1 span:nth-child(5){animation-delay: 0.4s;}
			h1 span:nth-child(6){animation-delay: 0.5s;}
			h1 span:nth-child(7){animation-delay: 0.6s;}
			h1 span:nth-child(8){animation-delay: 0.7s;}
			h1 span:nth-child(9){animation-delay: 0.8s;}
			h1 span:nth-child(10){animation-delay: 0.9s;}
			@keyframes animate1 {
				/* 0%,100% 的设置 是一样的，我们可以放在一起写 */
				0%,100%{
					color: #fff;
					filter: blur(3px);
					text-shadow: 0 0 10px #00b3ff,
								0 0 20px #00b3ff,
								0 0 40px #00b3ff,
								0 0 80px #00b3ff,
								0 0 120px #00b3ff,
								0 0 200px #00b3ff,
								0 0 320px #00b3ff,
								0 0 500px #00b3ff,
								0 0 800px #00b3ff;
				}
				25%,75%{
					color: #000;
					filter: blur(0px);
					text-shadow: none;
				}
			}
		</style>