css+js实现炫酷彩色柔光背景动画按钮效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现炫酷彩色柔光背景动画按钮效果代码

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

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

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

  
  
  
<style>
:root {
        --defaultFont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --garageWhite: rgba(235, 237, 236, 1);
}

*, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
                
[type=submit], [type=reset], button, html [type=button] {
        -webkit-appearance: button;
        text-transform: none;
}
                
html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-family: var(--defaultFont);
        font-weight: 300;
}

body {
        position: relative;
        height: 100vh;
        width: 100vw;
        color: var(--garageWhite);
                        
        display: grid;
        place-items: center;
                        
        transition: all 200ms ease;
        overflow-x: hidden;
                        
        background: hsla(228deg, 12.2%, 8.04%, 1);
}

.lightTheme {
        background: rgba(235, 236, 240, 1);
}

.radial-ring-container {
        --borderRadius: .856em;
        --borderRadiusBefore: .867em;
        --offset: 0%;
        --blurAmount: 12px;
        --saturateAmount: 120%;
        --contrastAmount: 1.05;
        --brightnessAmount: 1.1;
        --backgroundSize: 250% 100%;
        --backgroundPosition: 50% 50%;
        --backangle: 127deg;
        --doubleHeight: var(--bheight);
        --doubleWidth: var(--bwidth);
        
        --color01: #1598fc;
        --color02: #18ecfd;
        --color03: #26f0ba;
        --color04: #e6d05a;
        --color05: #fb9f56;
        --color06: #fa6984;
        --color07: #838ce1;
        --color08: #1598fc;
        --color09: #fadd81;
        --color10: #8cfa97;
        --color11: #06d4d1;
        --color12: #16b0b0; /* ending coloring for match to front for repeat */
        
        position: relative;
        content: "";
        width: 100%;
        max-width: 175px;
        height: 100%;
        max-height: 55px;
        transition: background 150ms ease;
        border-radius: var(--borderRadius);
        transition: all 200ms linear;
}

.lightTheme .radial-ring-container {
        border-top: 1px solid rgba(255, 255, 255, .6);
        border-left: 1px solid rgba(255, 255, 255, .6);
        border-right: 1px solid rgba(255, 255, 255, .6);
        border-bottom: 2px solid rgba(255, 255, 255, .6);
}

.radial-ring-container:hover {
        cursor: pointer;
        transform: scale(1.03);
}

.radial-ring-container:active {
        transform: scale(.98);
}

.radial-ring-container:before {
        content: "";
        width: 95%;
        height: 70%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        
        background:
        repeating-radial-gradient(
                circle at left top,
                var(--color01) calc(var(--offset) + 12.500% * 01),
                var(--color02) calc(var(--offset) + 12.500% * 02),
                var(--color03) calc(var(--offset) + 12.500% * 03),
                var(--color04) calc(var(--offset) + 12.500% * 04),
                var(--color05) calc(var(--offset) + 12.500% * 05),
                var(--color06) calc(var(--offset) + 12.500% * 06),
                var(--color07) calc(var(--offset) + 12.500% * 07),
                var(--color08) calc(var(--offset) + 12.500% * 08)
                /*
                var(--color09) calc(var(--offset) + 12.500% * 09),
                var(--color10) calc(var(--offset) + 12.500% * 10),
                var(--color11) calc(var(--offset) + 12.500% * 11),
                var(--color12) calc(var(--offset) + 12.500% * 12)
                */
        );
        
        background-size: var(--backgroundSize);
        background-position: var(--backgroundPosition);
        
        -webkit-filter: brightness(var(--brightnessAmount)) contrast(var(--contrastAmount)) saturate(var(--saturateAmount)) blur(30px));
        filter: brightness(var(--brightnessAmount)) contrast(var(--contrastAmount)) saturate(var(--saturateAmount)) blur(30px);
        z-index: -1;
        mix-blend-mode: hard-light;
}

.lightTheme .radial-ring-container::before {
        mix-blend-mode: multiply;
}

.radial-ring-container:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: var(--borderRadiusBefore);
}

.radial-ring-wrapper {
        position: absolute.........完整代码请登录后点击上方下载按钮下载查看