radio实现扇形主题颜色单选切换器代码

代码语言:html

所属分类:布局界面

代码描述:radio实现扇形主题颜色单选切换器代码

代码标签: radio 扇形 主题 颜色 单选 切换 代码

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

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

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

  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=lilex:100,300);
@layer base, demo;


@layer demo{
	:root{
		/* colors for selector */
		--option-color-1: slategrey;
		--option-color-2: maroon;
		--option-color-3: dodgerblue;
		--option-color-4: goldenrod;
		--option-color-5: olivedrab;
		--option-color-6: rebeccapurple;
	}
	body{
		transition: background 300ms ease-in-out;
		
		background-color: var(--body-bg-color);
		background-image: radial-gradient(circle,#0000, rgb(0 0 0 / .5));
		
		&:has(#color-1:checked){ --body-bg-color: var(--option-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0