html背景边框特效代码，纯JS实现动态边框特效
HtmlCssJs
^-^正常的边框
^-^更慢的边框
^-^更快的边框
^-^图⽚边框
^-^更细的边框
附赠的圆形
body {
flex-wrap:wrap;
flex:1
}
.flex {
display:flex;
justify-content:center;
align-items:center;
}
.demo {
width:350px;
height:200px;
position:relative;
margin:50px;
background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
color:#fff;
font-size:30px;
}
.circle {
width:100px;
height:100px;
border-radius:50%;
position:relative;
background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
color:#fff;
}
.circle:before {
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:-6px;
border:5px solid transparent;
border-top:5px solid #f64f59;
border-radius:50%;
transform:rotate(45deg);
animation:circleRotate 3s linear infinite;
}
@keyframes circleRotate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
/*
功能：为矩形元素附上⼀层运动的边线
原理: 核⼼:css clip rect web animation 负责动态化
注意：请使⽤较⾼版本现代浏览器打开 本代码 使⽤了es6语法 且并未对css各浏览器前缀做处理如需兼容低版本浏览器 请⾃⾏加 web animate polyfill 及 使⽤babel转译
author: 胡洋洋
time: 2019-03-16
*/
/* 使⽤
_initDanceBorder(el,option);
*/
//纯 JS实现动态边框效果
//传⼊依赖元素 ⾃动⽣成动态边框
/*
测试⽤配置
*/
const options = [{}, {
duration: 12000,
double: false
}, {
duration: 4000,
'border-color': 'red',
'easing': 'ease-in-out'
}, {
'margin': -15,
'borderWidth': 10,
'border-image': "url(./wx.png) 10 10",
}, {
'borderWidth': 2
}]
//使⽤⽅法
for (let i = 0; i < ElementsByClassName('demo').length; i++) {
_ElementsByClassName('demo')[i], options[i]); }
/*************************** 主 体 代 码 ********************************/
//传⼊dom元素与 配置即可
function _initDanceBorder(el, options = {}) {
//默认设置 尺⼨单位均为px
let _options = {
//边框模糊度
blur: 1,
//距依赖元素距离
margin: -5,
//边框宽度
borderWidth: 4,
//转⼀周时长
duration: 8000,
//运动效果 default：匀速
easing: 'linear',
//是否两条运动线 默认两条
double: true,
//渐变⾊边框 优先级⾼ 若使⽤渐变⾊或图⽚背景 请正确传⼊该值 否则边框不会显⽰
'border-image': 'linear-gradient(to bottom right, #12c2e9,#c471ed,#f64f59) 10 10',
//边框⾊ border-image 优先级低
'border-color': 'green'
}
//存在正常⾊ 不存在渐变⾊ 渐变⾊赋值为空
options['border-color'] && !options['border-image'] && (_options['border-image'] = 'none') //设置拷贝
Object.keys(_options).forEach(key => {
options[key] && (_options[key] = options[key]);
//double 的特殊判断
if (key == 'double' && typeof options[key] == 'boolean') {
_options[key] = options[key]
}
})
//元素基本属性
const styleObj = {
'content': '',
'z-index': -1,
'margin': `${_options.margin}px`,
'border': `${_options.borderWidth}px solid`,
'border-color': _options['border-color'],
'border-image': _options['border-image'],
'filter': `blur(${_options.blur}px)`,
'position': 'absolute',
'top': 0,
'bottom': 0,
'left': 0,
'right': 0
}
const pW = el.style.width || el.offsetWidth;
const pH = el.style.height || el.offsetHeight;
const fullWidth = pW + _options.margin * -2;
const fullHeight = pH + _options.margin * -2;
//四边切割数组
const rectArray = [
`rect(${-_options.blur}px, ${fullWidth}px, ${-_options.margin}px, ${-_options.blur}px)`,
`rect(0px, ${-_options.margin}px, ${fullHeight + _options.blur}px, ${-_options.blur}px)`,
`rect(${pH}px, ${fullWidth + _options.blur}px, ${fullHeight + _options.blur}px, 0px)`,
`rect(${-_options.blur}px, ${fullWidth + _options.blur}px, ${fullHeight}px, ${pW + _options.blur}px)` ]
const clipAnimate = [{
clip: rectArray[0]
},
{
clip: rectArray[1],
offset: 0.25
},
{
clip: rectArray[2],
offset: 0.5
},
{
clip: rectArray[3],实现特效的代码js
offset: 0.75
},
{
clip: rectArray[0],
offset: 1
}
];
/
/由于border的可见特性使delay⽆效 第⼆条延迟⼀半的边动画 从0.5开始

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。