div+css实现简洁滑动表单单选框亮色与暗色点击效果代码-html代码-BFW代码库

div+css实现简洁滑动表单单选框亮色与暗色点击效果代码

代码语言：html

代码描述：div+css实现简洁滑动表单单选框亮色与暗色点击效果代码

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

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

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

<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
  
  
  
<style>
/*
 * 26 April 2023
 * CSS Radio Group with Subtle Animation
 * tested on Firefox v112.0.1/x64 and Chrome v114.0.5720.4-dev/x64
 */

/* === make your customizations here === */
:root {
	--outline-focus: 2px solid;
	--outline-offset: 0.875rem;
}

.radio-group {
	--offset-radio-box: -0.25rem;
	--size-radio-box: 1.5rem;
	--gap-radio-text: 0.75rem;
	--opacity-radio: 0.75;
	--spacing-radio: 0.8rem;
	--spacing-heading: 1.25rem;
	--size-font: 1rem;
	--size-font-heading: 1.5rem;
	--duration-radio: 200ms;
	--delay-radio: 100ms;
}

.wrapper {
	gap: 4rem;
}

section {
	padding: 4rem 2rem;
}

.light-theme {
	color: hsl(250, 100%, 2.5%);
	--background: #fff;
	--color-heading: hsl(250, 100%, 2.5%);
	--color-radio: hsl(250, 100%, 2.5%);
	--color-radio-checked: hsl(239, 100%, 61%);
	--color-outline: rgba(0, 0, 0, 0.4);
}

.dark-theme {
	color: #fff;
	--background: #090b1.........完整代码请登录后点击上方下载按钮下载查看