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: #090b10;
	--color-heading: hsl(174, 42%, 65%);
	--color-radio: #fff;
	--color-radio-checked: hsl(174, 42%, 65%);
	--color-outline: #fff;
}

.dark-theme .heading {
	text-shadow: 0 0.125rem 0.625rem hsla(174, 42%, 65%, 0.3);
}

/* === presentation === */
html,
body {
	width: 100%;
	height: 100%;
}

body {
	font-family: "Comfortaa", Ubuntu, Arial, Helvetica, sans-serif;
	font-weight: 700;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

section {
	background-color: var(--background);
	display: grid;
	place-items: center;
}

.wrapper {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

section ::-moz-selection {
	background-color: var(--color-radio-checked);
	color: var(--background);
}

section .........完整代码请登录后点击上方下载按钮下载查看