css3-animation-外边框闪烁警告

最新推荐文章于 2025-06-20 10:00:22 发布

原创最新推荐文章于 2025-06-20 10:00:22 发布 · 3.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS3的animation属性结合box-shadow和outline创建外边框闪烁警告效果。讨论了animation的相关属性，如animation、box-shadow、box-sizing，以及使用outline和outline-offset的技巧。同时，指出了在Chrome中处理动画兼容性问题的复杂性，特别是关于animation-iteration-count属性的前缀需求。

相关示例

闪烁边框静态图
没有截动图，但是描述地来讲就是红色边框闪烁的样子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3动画闪烁框</title>
		<style type="text/css">
			.box-content {
				position: relative;
				margin: 0 auto;
				margin-top: 100px;
				width: 210px;
				height: 34px;
				background-color: #fff;
			}
			.box-wrapper {
				position: absolute;
				box-sizing: border-box;
				top: -2px;
				left: -2px;
				width: 214px;
				height: 38px;
				background-color: #F56C6C;
				/* border: 4px dashed black; */
				box-shadow:#F56C6C 0px 0px 4px;
				z-index: -9;
				box-shadow: #000;
			}
			.animation-flash {
				animation: myfirst 0.5s linear;
				-webkit-animation: myfirst 0.5s linear;
				animation-iteration-count:infinite;
				-webkit-animation-iteration-count:infinite;
			}
			@keyframes myfirst{
				0%   { opacity:1; }
				25%  { opacity:0.85; }
				50%  { opacity:0.75; }
				75%  { opacity:0.65; }
				100% { opacity:0.25; }
			}
			@-webkit-keyframes myfirst{
				0%   { opacity:1; }
				25%  { opacity:0.85; }
				50%  { opacity:0.65; }
				75%  { opacity:0.65; }
				100% { opacity:0.25; }
			}
			/* 兼容性前缀
			 ** Firefox: -moz
			 ** Safari & Chrome: -webkit
			 ** Opera: -o
			 */
		</style>
	</head>
	<body>
		<div class="box-content">
			<div class="box-wrapper animation-flash">	
			</div>
		</div>
	</body>
</html>