<div class="radial-ring-container">
<div class="radial-ring-wrapper">
<div class="radial-ring-color"></div>
<div class="radial-ring-button">Sign Up</div>
</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
: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;
content: "";
width: 100%;
max-width: 175px;
height: 100%;
max-height: 55px;
transition: background 150ms ease;
border-radius: var(--borderRadius);
overflow: hidden;
border-top: 1px solid rgba(0, 0, 0, .6);
border-left: 1px solid rgba(0, 0, 0, .6);
border-right: 1px solid rgba(0, 0, 0, .6);
border-bottom: 2px solid rgba(0, 0, 0, .6);
box-shadow:
0 1px 1px hsl(0deg 0% 0% / 0.075),
0 2px 2px hsl(0deg 0% 0% / 0.075),
0 4px 4px hsl(0deg 0% 0% / 0.075),
0 6px 6px hsl(0deg 0% 0% / 0.075);
}
.radial-ring-color {
content: "";
width: 150%; /* width set to + blur to make borders no blur */
height: 150%; /* height set to + blur to make borders no blur */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -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(var(--blurAmount));
filter: brightness(var(--brightnessAmount)) contrast(var(--contrastAmount)) saturate(var(--saturateAmount)) blur(var(--blurAmount));
}
.radial-ring-color:before,
.radial-ring-color:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radial-ring-color:before {
height: var(--doubleHeight);
background:
repeating-linear-gradient(
var(--backangle),
transparent,
transparent,
rgba(0, 0, 0, .6),
transparent,
transparent,
transparent,
rgba(0, 0, 0, .2),
transparent var(--doubleHeight)
),
repeating-linear-gradient(
var(--backangle),
transparent,
transparent,
rgba(255, 255, 255, .55),
transparent,
transparent,
rgba(255, 255, 255, .35),
transparent,
transparent var(--doubleHeight)
);
background-blend-mode: color-burn, overlay;
mix-blend-mode: color-dodge;
background-repeat: repeat;
background-size:: calc( var(--doubleHeight) / sin(var(--backangle)) ) 100%;
animation: moveAccentLights 10s linear infinite;
}
@keyframes moveAccentLights {
100% {
background-position: calc( var(--doubleHeight) / sin(var(--backangle)) ) 0%;
}
}
.radial-ring-button {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: hsla(0deg, 0%, 0.78%, .75);
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
backface-visibility: hidden;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .15);
text-rendering: geometricprecision;
font-size: 1.1625em;
font-weight: 600;
text-transform: uppercase;
}
.radial-ring-button:after {
content: "";
position: absolute;
width: 94%;
height: 45%;
top: 6%;
left: 50%;
transform: translate(-50%, -3%);
border-radius: .65em .65em 0em 0em;
background:
linear-gradient(
rgba(255, 255, 255, 0.65),
rgba(255, 255, 255, 0)
);
z-index: 1;
mix-blend-mode: screen;
}
.radial-ring-button:before {
content: "";
position: absolute;
width: 98%;
height: 45%;
bottom: 3%;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 0em 0em .65em .65em;
background:
linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.3)
);
z-index: 1;
mix-blend-mode: color-burn;
}
JS
格式化
var colorContainers = document.querySelector('.radial-ring-container');
// colorContainers.forEach(colorContainer => {
// colorContainer.addEventListener('DOMContentLoaded', function(e) {
// 彩虹色
var color01 = '#1598fc';
var color02 = '#18ecfd';
var color03 = '#26f0ba';
var color04 = '#e6d05a';
var color05 = '#fb9f56';
var color06 = '#fa6984';
var color07 = '#838ce1';
var color08 = '#1598fc';
// var color09 = '#fadd81';
// var color10 = '#8cfa97';
// var color11 = '#06d4d1';
// var color12 = '#16b0b0';
var tempColor;
var offset = 0;
colorContainers.style.setProperty("--color01", color01);
colorContainers.style.setProperty("--color02", color02);
colorContainers.style.setProperty("--color03", color03);
colorContainers.style.setProperty("--color04", color04);
colorContainers.style.setProperty("--color05", color05);
colorContainers.style.setProperty("--color06", color06);
colorContainers.style.setProperty("--color07", color07);
colorContainers.style.setProperty("--color08", color08);
// colorContainers.style.setProperty("--color09", color09);
// colorContainers.style.setProperty("--color10", color10);
// colorContainers.style.setProperty("--color11", color11);
// colorContainers.style.setProperty("--color12", color12);
function swapColors() {
// color12 = color11;
// color11 = color10;
// color10 = color09;
// color09 = color08;
color08 = color07;
color07 = color06;
color06 = color05;
color05 = color04;
color04 = color03;
color03 = color02;
color02 = color01;
color01 = color12;
colorContainers.style.setProperty("--color01", color01);
colorContainers.style.setProperty("--color02", color02);
colorContainers.style.setProperty("--color03", color03);
colorContainers.style.setProperty("--color04", color04);
colorContainers.style.setProperty("--color05", color05);
colorContainers.style.setProperty("--color06", color06);
colorContainers.style.setProperty("--color07", color07);
colorContainers.style.setProperty("--color08", color08);
// colorContainers.style.setProperty("--color09", color09);
// colorContainers.style.setProperty("--color10", color10);
// colorContainers.style.setProperty("--color11", color11);
// colorContainers.style.setProperty("--color12", color12);
}
function setOffset(value) {
colorContainers.style.setProperty("--offset", value + "%");
}
function animate() {
var handle = window.setInterval(function() {
offset++;
if (offset > 3500) {
offset = 0;
window.clearInterval(handle);
// swapColors();
} else {
window.clearInterval(handle);
}
setOffset(offset);
requestAnimationFrame(animate);
}, 40);
}
animate();
// });
// });
colorContainers.style.setProperty('--bwidth', (colorContainers.offsetWidth * 2.3).toFixed(2) + 'px');
colorContainers.style.setProperty('--bheight', (colorContainers.offsetHeight * 2.3).toFixed(2) + 'px');