@-webkit-keyframes neon {
from {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177;
}
to {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset;
}
}
@-moz-keyframes neon {
from {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177;
}
to {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset;
}
}
@-o-keyframes neon {
from {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177;
}
to {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset;
}
}
@keyframes neon {
from {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177;
}
to {
-webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset;
}
}
.deallinkactive {
display: inline;
float: right;
width: 508px;
padding: 5px;
font-size: 14px;
margin: 10px 10px 8px 8px;
border: 1.5px solid rgba(173, 38, 38, 0.541176);
-webkit-border-radius: 3px;
border-radius: 3px;
color: rgba(0, 0, 0, 1);
background: #ecf0f1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-animation: neon2 .2s ease-in-out infinite alternate;
-moz-animation: neon2 .2s ease-in-out infinite alternate;
animation: neon2 .2s ease-in-out infinite alternate;
}
Box阴影动画可以在Chrome和Mobiles上完美运行,但不能在IE和Firefox上完美运行。我已经尝试过-webkit-box-shadow,box-shadow,moz-box-shadow以及我在Internet上找到的所有东西。如果我在框阴影中替换了文本阴影,则文本阴影会起作用。帮助!!
首先,您的班级.deallinkactive
指向一个错误的关键帧,它说neon2
,将其更改为neon
。然后-webkit-
从所有删除-webkit-box-shadow
。最后,@keyframes
Firefox错误830056的内联或作用域样式表中不支持。
但是您有另一种选择:
@keyframes neon {
0% {
-webkit-box-shadow: 0px 0px 12px 0px rgba(255,17,120,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(255,17,120,1);
box-shadow: 0px 0px 12px 0px rgba(255,17,120,1);
}
100% {
-webkit-box-shadow: 0px 0px 12px 0px rgba(255,153,0,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(255,153,0,1);
box-shadow: 0px 0px 12px 0px rgba(255,153,0,1);
}
}
.deallinkactive {
display: block;
float: right;
width: 508px;
padding: 5px;
font-size: 14px;
margin: 10px 10px 8px 8px;
border: 1.5px solid rgba(173, 38, 38, 0.541176);
-webkit-border-radius: 3px;
border-radius: 3px;
color: rgba(0, 0, 0, 1);
background: #ecf0f1;
transition: all 0.5s ease;
animation: neon .2s ease-in-out infinite alternate;
}
它适用于现代浏览器(chrome,firefox,safari,IE10 +)。希望能帮助到你。
提示:尝试使用cssmatic.com/box-shadow生成box-shadow
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句