纯JS实现动态边框

Html

Css

 ^-^正常的边框
^-^更慢的边框
^-^更快的边框
^-^图片边框
^-^更细的边框
附赠的圆形

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实现动态边框效果
//根据 http://www.jq22.com/jquery-info3297 bee木头 作者 核心思路(css clip rect) 创作
//传入依赖元素 自动生成动态边框

/* 
测试用配置
 */
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 < document.getElementsByClassName('demo').length; i++) {
    _initDanceBorder(document.getElementsByClassName('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],
            offset: 0.75
        },
        {
            clip: rectArray[0],
            offset: 1
        }
    ];

//由于border的可见特性使delay无效  第二条延迟一半的边动画   从0.5开始  
    const clipAnimateTwo = [{
            clip: rectArray[2]
        },
        {
            clip: rectArray[3],
            offset: 0.25
        },
        {
            clip: rectArray[0],
            offset: 0.5
        },
        {
            clip: rectArray[1],
            offset: 0.75
        },
        {
            clip: rectArray[2],
            offset: 1
        }
    ];

const animateOption = {
        duration: _options.duration,
        iterations: Infinity,
        easing: _options.easing
    };

const section = initBaseEl();

//Web Animations  实现keyframes动画
    section.animate(clipAnimate, animateOption);

//是否两条运动线
    if (_options.double) {
        let sectionTwo = initBaseEl();
        sectionTwo.animate(clipAnimateTwo, animateOption);
    }

//构造元素
    function initBaseEl() {
        const section = document.createElement("section");
        //style属性赋值
        Object.keys(styleObj).forEach(key => {
            section.style[key] = styleObj[key]
        })

el.appendChild(section);

return section;
    }

//页面尺寸改变  修改
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

纯JS实现动态边框



代码描述：纯 JS实现动态边框效果传入依赖元素自动生成动态边框

功能:为矩形元素附上一层运动的边线原理: 核心:css clip rect web animation 负责动态化注意:请使用较高版本现代浏览器打开本代码使用了es6语法且并未对css各浏览器前缀做处理如需兼容低版本浏览器请自行加 web animate polyfill 及使用babel转译author: 胡洋洋 time: 2019-03-16
//纯 js实现动态边框效果 //根据 http://www.jq22.com/jquery-info3297 bee木头作者核心思路(css clip rect) 创作 //传入依赖元素自动生成动态边框 /* 使用_initdanceborder(el,option);*/ //默认设置尺寸单位均为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' }

2

最新

发表评论全部评论

暂时没有评论！

一一依旧0

2019/3/24 10:57:01

需要页面resize自动调整边框的请评论留言回复

一一依旧0

2019/3/23 0:35:57

配置注释有错乱,依次往下调一级即可回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

一一依旧

相关代码

纯JS实现动态边框

最新