html动态边框,动态边框.html

* {

padding: 0;

margin: 0;

}

.container {

background: black;

position: relative;

border: 1px solid #ddd;

width: 450px;

height: 450px;

}

.sparkLine {

position: absolute;

transform-origin: left top;

}

.sparkLine .sparkParticle {

width: 1px;

height: 1px;

float: left;

color: white;

background: white;

box-shadow: 0 0 10px white;

opacity: 0;

}

@keyframes fade {

0% { opacity: 0; }

50% { opacity: 1; }

100% { opacity: 0; }

}

.sparkLine .sparkParticle {

}

function createLine(color, left, top, width, height, length, deg, size, speed) {

const sparkLine=document.createElement("div");

sparkLine.className="sparkLine";

sparkLine.style.top=`${top}px`;

sparkLine.style.left=`${left}px`;

sparkLine.style.width=`${length}px`;

sparkLine.style.height=`${height}px`;

sparkLine.style.transform=`rotateZ(${deg}deg)`;

for(let i = 0; i < size; i++){

const sparkParticle=document.createElement("div");

sparkParticle.className="sparkParticle";

sparkParticle.style.animation=`fade ${speed}s ${i/100}s infinite`;

sparkParticle.style.width=`${width}px`;

sparkParticle.style.height=`${height}px`;

sparkParticle.style.backgroundColor=color;

sparkLine.append(sparkParticle)

}

document.querySelector(".container").append(sparkLine);

}

//创建线

createLine('#102b6a', 20, 20, 2, 2, 418, 0 , 200, 1);//上

createLine('#102b6a', 418, 20, 2, 2, 418, 90, 200, 1);//右

createLine('#102b6a', 20, 418, 2, 2, 418, 0 , 200, 1);//下

createLine('#102b6a', 20, 20, 2, 2, 418, 90, 200, 1);//左

一键复制

编辑

Web IDE

原始数据

按行查看

历史