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

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

代码语言：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-conta.........完整代码请登录后点击上方下载按钮下载查看