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 < 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

總結

以上是生活随笔為你收集整理的html背景边框特效代码,纯JS实现动态边框特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。