css3-animation-外边框闪烁警告_报警边框闪烁样式 css_magic-fish的博客

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

奋斗的麦片 · 4个信号，出现2个以上就说明你的电脑被黑客入 ...· 1 年前 ·

健身的罐头 · R语言机器学习与临床预测模型24--C-st ...· 2 年前 ·

温暖的生菜 · linux内核编译相关注意点 - 知乎· 2 年前 ·

谦和的柳树 · 在openpyxl中，有没有一种方法可以看到 ...· 2 年前 ·

animation的属性值非常多

2.box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
css3: 属性值–*水平阴影的位置，*垂直阴影的位置，模糊距离，阴影的大小，阴影的颜色，从外侧阴影改变内侧阴影 `
四周阴影的示例：
3.box-sizing

box-sizing: content-box|border-box|inherit:
4.另一种写法:利用 outline:2px dashed black; 与 outline-offset:4px;

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

<!DOCTYPE html>
		<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>
		<div class="box-content">
			<div class="box-wrapper animation-flash">	
			</div>
		</div>
	</body>
</html>
遇到的问题
 
 1.四周阴影
 2.在Chrome中 animation: myfirst 0.5s linear; animation的前三个属性不需要加浏览器的兼容性前缀，但是 animation-iteration-count 属性开始就要写兼容性前缀了。比较麻烦的是不同浏览器不同属性的兼容情况不同。 
                    css3闪烁边框相关属性相关示例遇到的问题相关属性1.animationanimation的属性值非常多2.box-shadowbox-shadow: h-shadow v-shadow blur spread color inset;css3: 属性值–*水平阴影的位置，*垂直阴影的位置，模糊距离，阴影的大小，阴影的颜色，从外侧阴影改变内侧阴影`四周阴影的示例：	3.box-sizingbox-sizing: content-box|border-box|inherit:4.另
&lt;head&gt;
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,25...
				代码简介：
只用CSS实现的导航下拉菜单，滑过变色，完全css代码，条例WEB标准，直接复制就可以使用啦，非常不错，推荐给大家。使用时候你可以复制多个菜单单元，这样就真正成了一个导航条，演示只是为了看效果，实际用时请根据你的网页面局修改一下
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h...
				最近在做地图上的一个故障指示器，  要求有故障时，此指示器会呈现不同的展现样式， 用闪烁最好了！
但openLayers3中没有闪烁的效果，所以就借助CSS3的动画效果了，反正openLayers3也是使用了h5+css的，它们通用。
最终的效果是：
在你的地图HTML文件中加一个div:
&lt;!-- 故障指示器的闪烁 --&gt;
&lt;div id="css_a...
 .animation-flash {
  animation: myfirst 0.5s linear;
  -webkit-animation: myfirst 0.5s linear;
  animation-iteration-count: infinite;