使用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, 13, 20, 1);
border-radius: 6px;
}
.diagramTop-item-click {
border: 1px solid #379ffe;
box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
animation: mymove 0.5s infinite;
-webkit-animation: mymove 0.5s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
from {
border: 1px solid #379ffe;
box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
}
to {
border: 1px solid #090d14;
box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/ {
from {
border: 1px solid #379ffe;
box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
}
to {
border: 1px solid #090d14;
box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
}
}