文字闪烁

最新推荐文章于 2022-06-08 09:19:54 发布
chimi5754
最新推荐文章于 2022-06-08 09:19:54 发布
阅读量205
点赞数
原文链接：https://my.oschina.net/qingqingdego/blog/3065600
版权
记到自己的位置不容易丢。
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="main">
			文字闪烁：<span class="blink">闪烁效果</span>
		</div>

		<style type="text/css">
			/* 定义keyframe动画，命名为blink */
			@keyframes blink {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			/* 添加兼容性前缀 */
			@-webkit-keyframes blink {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			@-moz-keyframes blink {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			@-ms-keyframes blink {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			@-o-keyframes blink {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			/* 定义blink类*/
			.blink {
				color: #dd4814;
				animation: blink 1s linear infinite;
				/* 其它浏览器兼容性前缀 */
				-webkit-animation: blink 1s linear infinite;
				-moz-animation: blink 1s linear infinite;
				-ms-animation: blink 1s linear infinite;
				-o-animation: blink 1s linear infinite;
			}
		</style>

		通过设置text-shadow的值，来实现文字阴影闪烁的效果，效果如下：
		<div class="box"> 闪烁效果</div>
		<style type="text/css">
			.box {
				font-size: 20px;
				color: #4cc134;
				margin: 10px;
				animation: changeshadow 1s ease-in infinite;
				/* 其它浏览器兼容性前缀 */
				-webkit-animation: changeshadow 1s linear infinite;
				-moz-animation: changeshadow 1s linear infinite;
				-ms-animation: changeshadow 1s linear infinite;
				-o-animation: changeshadow 1s linear infinite;
			}

			@keyframes changeshadow {
				0% {
					text-shadow: 0 0 4px #4cc134
				}

				50% {
					text-shadow: 0 0 40px #4cc134
				}

				100% {
					text-shadow: 0 0 4px #4cc134
				}
			}

			/* 添加兼容性前缀 */
			@-webkit-keyframes changeshadow {
				0% {
					text-shadow: 0 0 4px #4cc134
				}

				50% {
					text-shadow: 0 0 40px #4cc134
				}

				100% {
					text-shadow: 0 0 4px #4cc134
				}
			}

			@-moz-keyframes changeshadow {
				0% {
					text-shadow: 0 0 4px #4cc134
				}

				50% {
					text-shadow: 0 0 40px #4cc134
				}

				100% {
					text-shadow: 0 0 4px #4cc134
				}
			}

			@-ms-keyframes changeshadow {
				0% {
					text-shadow: 0 0 4px #4cc134
				}

				50% {
					text-shadow: 0 0 40px #4cc134
				}

				100% {
					text-shadow: 0 0 4px #4cc134
				}
			}

			@-o-keyframes changeshadow {
				0% {
					text-shadow: 0 0 4px #4cc134
				}

				50% {
					text-shadow: 0 0 40px #4cc134
				}

				100% {
					text-shadow: 0 0 4px #4cc134
				}
			}
		</style>

		利用背景图片或者背景渐变，实现文字颜色的闪烁效果，效果如下：
		<span class="box2">闪烁效果</span>
		<style type="text/css">
			.box2 {
				display: inline-block;
				font-size: 20px;
				margin: 10px;
				background: linear-gradient(left, #f71605, #e0f513);
				background: -webkit-linear-gradient(left, #f71605, #e0f513);
				background: -o-linear-gradient(right, #f71605, #e0f513);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				animation: scratchy 0.253s linear forwards infinite;
				/* 其它浏览器兼容性前缀 */
				-webkit-animation: scratchy 0.253s linear forwards infinite;
				-moz-animation: scratchy 0.253s linear forwards infinite;
				-ms-animation: scratchy 0.253s linear forwards infinite;
				-o-animation: scratchy 0.253s linear forwards infinite;
			}

			@keyframes scratchy {
				0% {
					background-position: 0 0;
				}

				25% {
					background-position: 0 0;
				}

				26% {
					background-position: 20px -20px;
				}

				50% {
					background-position: 20px -20px;
				}

				51% {
					background-position: 40px -40px;
				}

				75% {
					background-position: 40px -40px;
				}

				76% {
					background-position: 60px -60px;
				}

				99% {
					background-position: 60px -60px;
				}

				100% {
					background-position: 0 0;
				}
			}

			/* 添加兼容性前缀 */
			@-webkit-keyframes scratchy {
				0% {
					background-position: 0 0;
				}

				25% {
					background-position: 0 0;
				}

				26% {
					background-position: 20px -20px;
				}

				50% {
					background-position: 20px -20px;
				}

				51% {
					background-position: 40px -40px;
				}

				75% {
					background-position: 40px -40px;
				}

				76% {
					background-position: 60px -60px;
				}

				99% {
					background-position: 60px -60px;
				}

				100% {
					background-position: 0 0;
				}
			}

			@-moz-keyframes scratchy {
				0% {
					background-position: 0 0;
				}

				25% {
					background-position: 0 0;
				}

				26% {
					background-position: 20px -20px;
				}

				50% {
					background-position: 20px -20px;
				}

				51% {
					background-position: 40px -40px;
				}

				75% {
					background-position: 40px -40px;
				}

				76% {
					background-position: 60px -60px;
				}

				99% {
					background-position: 60px -60px;
				}

				100% {
					background-position: 0 0;
				}
			}

			@-ms-keyframes scratchy {
				0% {
					background-position: 0 0;
				}

				25% {
					background-position: 0 0;
				}

				26% {
					background-position: 20px -20px;
				}

				50% {
					background-position: 20px -20px;
				}

				51% {
					background-position: 40px -40px;
				}

				75% {
					background-position: 40px -40px;
				}

				76% {
					background-position: 60px -60px;
				}

				99% {
					background-position: 60px -60px;
				}

				100% {
					background-position: 0 0;
				}
			}

			@-o-keyframes scratchy {
				0% {
					background-position: 0 0;
				}

				25% {
					background-position: 0 0;
				}

				26% {
					background-position: 20px -20px;
				}

				50% {
					background-position: 20px -20px;
				}

				51% {
					background-position: 40px -40px;
				}

				75% {
					background-position: 40px -40px;
				}

				76% {
					background-position: 60px -60px;
				}

				99% {
					background-position: 60px -60px;
				}

				100% {
					background-position: 0 0;
				}
			}

			</body></html>