css实现炫酷彩色边框border转动走光动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现炫酷彩色边框border转动走光动画效果代码

代码标签: css 炫酷 彩色 边框 border 转动 走光 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">

 
<style>

@property --border-angle-1 {
        syntax: "
<angle>";
        inherits: true;
        initial-value: 0deg;
}

@property --border-angle-2 {
        syntax: "
<angle>";
        inherits: true;
        initial-value: 90deg;
}

@property --border-angle-3 {
        syntax: "
<angle>";
        inherits: true;
        initial-value: 180deg;
}


/* sRGB color. */
:root {
        --bright-blue: rgb(0, 100, 255);
        --bright-green: rgb(0, 255, 0);
        --bright-red: rgb(255, 0, 0);
        --background: black;
        --foreground: white;
        --border-size: 2px;
        --border-radius: 0.75em;
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
        :root {
                --bright-blue: color(display-p3 0 0.2 1);
                --bright-green: color(display-p3 0.4 1 0);
                --bright-r.........完整代码请登录后点击上方下载按钮下载查看

网友评论0