素材牛VIP会员

纯JS实现动态边框特效

 浏览:278次-  评论:0次-  发布时间:2019-03-30
    Html
    Css
    Js
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
代码描述:纯 JS实现动态边框效果 传入依赖元素 自动生成动态边框

功能:为矩形元素附上一层运动的边线原理:  核心:css clip rect   web animation 负责动态化注意:请使用较高版本现代浏览器打开  本代码 使用了es6语法 且并未对css各浏览器前缀做处理    如需兼容低版本浏览器   请自行加 web animate polyfill 及 使用babel转译author: 胡洋洋  time: 2019-03-16

//纯 js实现动态边框效果    
//传入依赖元素 自动生成动态边框
/* 使用_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'
}

讨论这个常用代码(0)回答他人问题或分享心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的积分余额:0 已下载次数: