最近新做的一项目中有一块内容为充值部分，产品经理觉得在用户余额不足的时候，除了禁止用户选择和输入的按钮外，应该让用户的视线集中到提示内容上，这样就能根据提示的内容快速进行充值操作。于是几个研究来研究去，最终决定让提示框的
边框
闪烁
来达到提醒目的。
由于项目需要兼容ie6，所以js成为了首选。考虑到js为单线程执行语言，于是递归超时调用方法为首选。
首先需要一个ID=blin...
背景这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的
边框
，如图：动态
边框
思路看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是
添加
四个
div
来分别实现上下左右的
边框
效果，虽然可行，但是要
添加
四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了...就在我绞尽脑汁的时候，灵光乍现...
代码如下：#ho-shan{width: 100%;height: 100%;position: relative;outline: none;background-color: #dd524d;border-radius: 5px;transform-origin: 0 0;opacity: .7;border: none;}#ho-shan::after {content: "";-webki...
使用
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
中，可以使用“@keyframes”规则和animation属性来实现
div
闪烁
效果；只需要先使用“@keyframes”创建具有
闪烁
效果的动画；然后使用animation属性设置动画所需时间，速度以及次数等。给
div
设置headerBox 样式即可。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
body{
<head>
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
border-color: #393;
box-shadow: 0 0 5px rgba(0,25...
.change {
animation: myfirst 2s infinite;
-moz-animation: myfirst 2s infinite; /* Firefox */
-webkit-animat
