@keyframes glow {
box-shadow: 0 0 5px rgba(252, 94, 94, .2), inset 0 0 5px rgba(252, 94, 94, .1), 0 1px 0 #d70c19;
100% {
border-color: #d70c19;
box-shadow: 0 0 20px rgba(252, 94, 94, .6), inset 0 0 10px rgba(252, 94, 94, .4), 0 1px 0 #d70c19;
已测无误。css根据自己的项目设置的,个别参数自己调整。
效果如下(进入课堂):
html部分:
<a class="onlinekf" href="#" target="_blank">
<i class="fas fa-book"></i>
<p>进</p>
<p>入</p>
<p>课</p>
<p>堂</p>
代码如下:#ho-shan{ width: 100%; height: 100%; position: relative; outline: none; background-color: #dd524d; border-radius: 5px; transform-origin: 0 0; opacity: .7; border:...
在网上查阅相关资料后,发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现,而没有渐变色边框围绕内容区域进行旋转的效果,于是我做了一个这样的demo供大家参考。
首先将内容区域嵌套进一个DIV盒子中并设置overflow:hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度,然后将内容区域居中,这样内容区域和父元素之间就有一个看似是边框的空白区域。
现在在这个空白区域加一个比父元素更大,背景为渐变色的盒子,将层级设置为最低z-index: -1;。再将这个渐变色背景的盒子加入旋转动画就完成了
<head>
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
border-color: #393;
box-shadow: 0 0 5px rgba(0,25...
使用css animation动画做闪动效果
在拖拽div节点时,给div节点添加diagramTop-item-click样式,使用css animation动画0.5秒执行一次。
css样式
.diagramTop-item {
width: 102px;
height: 32px;
background-color: #0e141f;
border: 1px solid #090d14;
box-shadow: 0px 1px 0px 0px rgba(9, 1
边框闪烁提示的代码可以通过CSS的animation属性来实现,具体的代码如下:@keyframes blinkingBorder {
border-color: #000;
50% {
border-color: #ff0;
100% {
border-color: #000;
}#blinking-border {
animation: blinkingBorder 1s infinite;