css实现24种表情开关效果代码-html代码-BFW代码库

css实现24种表情开关效果代码

代码语言：html

代码描述：css实现24种表情开关效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        :root {
           font-size: calc(5em + 20vw);
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: center;
        	align-content: center;
            align-items: center;
        	flex-wrap: wrap;
            min-height: 100vh;
        	overflow-x: hidden;
            background-color: #13fccd;
        }
        
        .toggle {
            position: relative;
            width: 1em;
            height: 0.1em;
            border-radius: 0.5em;
            border: 0.015em solid #9f9f9f;
            background-image: linear-gradient(#f2f2f2, #fff, #f2f2f2);
        	margin: 0.26em 0.15em;
            cursor: pointer;
        	filter: drop-shadow(0.015em 0.015em 0.01em rgba(0, 0, 0, 0.3))
        }
        
        .toggle-btn::after {
            position: absolute;
            top: -0.14rem;
        	left: 0;
            width: 50%;
            font-size: 0.35em;
            text-align: center;
            transition: all 500ms cubic-bezier(0.34, 0.78, 0.55, 1.4);
        }
        
        .toggle-checkbox {
            position: absolute;
            visibility: hidden;
        }
        
        .toggle-checkbox:checked + .toggle-btn::after {
        	left: 50%;
        }
        
        /* Happy/Sad Toggle */
        
        .happy-sad .toggle-btn::after {
            content: '😁';
        }
        
        .happy-sad .toggle-checkbox:checked + .toggle-btn::after {
            content: '😭';
        }
        
        /* Love/Hate Toggle */
        
        .love-hate .toggle-btn::after {
            content: '😍';
        }
        
        .love-hate .toggle-checkbox:checked + .toggle-btn::after {
            content: '😡';
        }
        
        /* Nerd/Cool Toggle */
        
        .nerd-cool .toggle-btn::after {
            content: '🤓';
        }
        
        .nerd-cool .toggle-checkbox:checked + .toggle-btn::after {
            content: '😎';
        }
        
        /* Young/Old Toggle */
        
        .young-old .toggle-btn::after {
            content: '👶';
        }
        
        .young-old .toggle-checkbox:checked + .toggle-btn::after {
            content: '👴';
        }
        
        /* Male/Female Toggle */
        
        .male-female .toggle-btn::after {
            content: '👨';
        }
        
        .male-female .toggle-checkbox:checked + .toggle-btn::after {
            content: '👩';
        }
        
        /* King/Queen Toggle */
        
        .king-queen .toggle-btn::after {
            content: '🤴';
        }
        
        .king-queen .toggle-checkbox:checked + .toggle-btn::after {
            content: '👸';
        }
        
        /* Sun/Moon Toggle */
        
        .sun-moon .toggle-btn::after {
            content: '🌞';
        }
        
        .sun-moon .toggle-checkbox:checked + .toggle-btn::after {
            content: '🌚';
        }
        
        /* Fire/Water Toggle */
        
        .fire-water .toggle-btn::after {
            content: '🔥';
        }
        
        .fire-water .toggle-checkbox:checked + .toggle-btn::after {
            content: '💧';
        }
        
        /* Heart/Break Toggle */
        
        .heart-break .toggle-btn::after {
            content: '💘';
        }
        
        .heart-break .toggle-checkbox:checked + .toggle-btn::after {
            content: '💔';
        }
        
        /* Bomb/Explode Toggle */
        
        .bomb-explode .toggle-btn::after {
            content: '💣';
        }
        
        .bomb-explode .toggle-checkbox:checked + .toggle-btn::after {
            content: '💥';
        }
        
        /* Egg Shell/Fry Toggle */
        
        .egg-shell-fry .toggle-btn::after {
            content: '🥚';
        }
        
        .egg-shell-fry .toggle-checkbox:checked + .toggle-btn::after {
            content: '🍳';
        }
        
        /* Takeoff/Land Toggle */
        
        .takeoff-land .toggle-btn:.........完整代码请登录后点击上方下载按钮下载查看