

嘻嘻不嘻嘻（附源码）

码途钥匙

2024-08-17

导读：嘻嘻不嘻嘻（附源码）

点击上方【蓝字】关注我们

嘻嘻不嘻嘻效果图

HTML

     
     
     
       
     
     
     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>嘻嘻不嘻嘻</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <style>
        /* 这里是 CSS 样式定义，下面会详细解释 */
    </style>
</head>
<body>
    <!-- 一个切换开关的整体标签 -->
    <label class="switch">
        <span class="switch__wrapper">
            <!-- 复选框输入元素 -->
            <input class="switch__input" type="checkbox" role="switch" checked />
            <!-- 表情图标容器 -->
            <span class="switch__emoji">
                <!-- 悲伤表情的面部元素 -->
                <span class="switch__emoji-face switch__emoji-face--sad">
                    <!-- 眼睛元素 -->
                    <span class="switch__emoji-eye"></span>
                    <span class="switch__emoji-eye"></span>
                    <!-- 嘴巴元素 -->
                    <span class="switch__emoji-mouth"></span>
                </span>
                <!-- 正常表情的面部元素 -->
                <span class="switch__emoji-face">
                    <span class="switch__emoji-eye"></span>
                    <span class="switch__emoji-eye"></span>
                    <span class="switch__emoji-mouth"></span>
                </span>
            </span>
        </span>
        <!-- 切换开关的标签文本 -->
        <span class="switch__label">Power</span>
    </label>
</body>
</html>

CSS

     
     
     
       
     
     
     

* {
    /* 通用样式设置，如边框、盒模型、边距和内边距 */
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* 定义了一些变量，用于控制颜色和过渡时间等 */
    --hue: 223;
    --bg: hsl(var(--hue), 10%, 90%);
    --fg: hsl(var(--hue), 10%, 10%);
    --trans-dur: 0.5s;
    --trans-timing1: cubic-bezier(0.65, 0, 0.35, 1);
    --trans-timing2: cubic-bezier(0.65, 0, 0.35, 1.5);
    font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));
}

body, input {
    /* 颜色和过渡设置 */
    color: var(--fg);
    font: 1em/1.5 sans-serif;
    transition: background-color var(--trans-dur) var(--trans-timing1), color var(--trans-dur) var(--trans-timing1);
}

body {
    /* 页面背景和布局设置 */
    background-color: var(--bg);
    display: flex;
    height: 100vh;
}

.switch {
    /* 切换开关的整体布局 */
    display: flex;
    margin: auto;
}

.switch__emoji {
    /* 表情图标的样式，包括阴影、溢出处理等 */
    box-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3);
    overflow: hidden;
    pointer-events: none;
    top: 0.25em;
    left: 0.25em;
    width: 1em;
    height: 1em;
}

[dir='rtl'].switch__emoji {
    /* 针对从右到左的文本方向的样式调整 */
    right: 0.25em;
    left: auto;
}

.switch__emoji,.switch__emoji:before,.switch__emoji:after,.switch__emoji-eye,.switch__emoji-mouth,.switch__emoji-face {
    /* 各种表情元素的定位和显示方式 */
    display: block;
    position: absolute;
}

.switch__emoji,.switch__emoji:before,.switch__emoji:after,.switch__emoji-eye,.switch__emoji-mouth {
    /* 一些元素的边框半径设置 */
    border-radius: 50%;
}

.switch__emoji:before,.switch__emoji:after {
    /* 表情图标的背景和阴影设置 */
    content: '';
    width: 100%;
    height: 100%;
    transform: translateZ(0);
}

.switch__emoji:before {
    /* 更多的背景和阴影设置 */
    background-color: #f2c40d;
    box-shadow: -0.25em -0.25em 0.25em #c29d0a inset, 0.1875em 0.1875em 0.25em #f9e286 inset;
}

.switch__emoji:after {
    /* 另一些阴影设置 */
    box-shadow: 0 0 0.125em 0.0625em rgba(245, 208, 61, 0.5) inset;
}

.switch__emoji,.switch__emoji-face {
    /* 3D 变换和过渡设置 */
    transform-style: preserve-3d;
    transition: transform var(--trans-dur) var(--trans-timing2);
}

.switch__emoji-eye,.switch__emoji-mouth {
    /* 背面不可见设置 */
    backface-visibility: hidden;
}

.switch__emoji-eye {
    /* 眼睛的样式设置 */
    border: 0.0625em solid hsl(var(--hue), 10%, 10%);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    width: 0.25em;
    height: 0.25em;
    transform: translate(-50%, -50%) rotateY(-22.5deg) translateZ(0.5em) rotateZ(45deg);
}

.switch__emoji-eye +.switch__emoji-eye {
    /* 第二个眼睛的位置和旋转设置 */
    transform: translate(-50%, -50%) rotateY(22.5deg) translateZ(0.5em) rotateZ(45deg);
}

.switch__emoji-mouth {
    /* 嘴巴的样式设置，包括背景图像等 */
    background-image: radial-gradient(100% 100% at 50% 100%, #f2180d 20%, #f5463d 33%, rgba(245, 70, 61, 0) 35%), radial-gradient(100% 100% at 75% 113%, black 26%, rgba(0, 0, 0, 0) 35%), linear-gradient(rgba(0, 0, 0, 0) 50%, black 50% 55%, hsl(var(--hue), 10%, 10%) 65%);
    top: 50%;
    left: 50%;
    width: 0.5em;
    height: 0.5em;
    transform: translate(-50%, -50%) rotateX(-15deg) translateZ(0.5em);
}

.switch__emoji-face--sad.switch__emoji-eye {
    /* 悲伤表情眼睛的样式 */
    background-color: hsl(var(--hue), 10%, 10%);
    border: 0;
    width: 0.1875em;
    height: 0.1875em;
}

.switch__emoji-face--sad.switch__emoji-mouth {
    /* 悲伤表情嘴巴的样式 */
    background-image: none;
    border: 0.0625em solid transparent;
    border-top-color: hsl(var(--hue), 10%, 10%);
    transform: translate(-50%, 0) rotateX(-20deg) translateZ(0.5em);
}

.switch__input,.switch__label {
    /* 点击高亮颜色设置 */
    -webkit-tap-highlight-color: transparent;
}

.switch__input {
    /* 复选框输入的样式设置，包括背景、阴影、边框半径等 */
    background-color: hsl(var(--hue), 10%, 80%);
    border-radius: 0.75em;
    box-shadow: 0.0625em 0.0625em 0.0625em white inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 80%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 90%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: block;
    width: 2.5em;
    height: 1.5em;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--trans-dur) var(--trans-timing1), box-shadow var(--trans-dur) var(--trans-timing1);
}

.switch__input:checked {
    /* 复选框被选中时的背景颜色设置 */
    background-color: #0ac213;
}

.switch__input:checked +.switch__emoji {
    /* 复选框被选中时表情图标的位移 */
    transform: translateX(100%);
}

[dir='rtl'].switch__input:checked +.switch__emoji {
    /* 针对从右到左文本方向的位移调整 */
    transform: translateX(-100%);
}

.switch__input:checked +.switch__emoji.switch__emoji-face {
    /* 选中时表情面部的旋转设置 */
    transform: rotateY(179.99deg);
}

[dir='rtl'].switch__input:checked +.switch__emoji.switch__emoji-face {
    /* 针对从右到左文本方向的旋转调整 */
    transform: rotateY(-179.99deg);
}

.switch__input:checked +.switch__emoji.switch__emoji-face +.switch__emoji-face {
    /* 选中时第二个表情面部的旋转设置 */
    transform: rotateY(0);
}

[dir='rtl'].switch__input:checked +.switch__emoji.switch__emoji-face +.switch__emoji-face {
    /* 针对从右到左文本方向的第二个面部旋转调整 */
    transform: rotateY(-360deg);
}

.switch__label,.switch__wrapper {
    /* 标签和包装器的显示设置 */
    display: block;
}

.switch__label {
    /* 标签的边距设置 */
    margin-inline-start: 0.5em;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.switch__wrapper {
    /* 包装器的相对定位设置 */
    position: relative;
}

@media (prefers-color-scheme: dark) {
    /* 当用户偏好深色模式时的样式调整 */
    :root {
        --bg: hsl(var(--hue), 10%, 10%);
        --fg: hsl(var(--hue), 10%, 90%);
    }

  .switch__input {
        background-color: hsl(var(--hue), 10%, 20%);
        box-shadow: 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 25%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 20%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
    }
}

这段 CSS 代码主要用于创建一个具有表情切换效果和相应样式的开关组件，并根据不同的条件（如文本方向、颜色方案偏好）进行样式调整。

完整代码

   
   
   
     
   
   
   

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>嘻嘻不嘻嘻</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <style>
      *{border:0;box-sizing:border-box;margin:0;padding:0;}:root{--hue:223;--bg:hsl(var(--hue),10%,90%);--fg:hsl(var(--hue),10%,10%);--trans-dur:0.5s;--trans-timing1:cubic-bezier(0.65,0,0.35,1);--trans-timing2:cubic-bezier(0.65,0,0.35,1.5);font-size:calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));}body,input{color:var(--fg);font:1em/1.5 sans-serif;transition:background-color var(--trans-dur) var(--trans-timing1),color var(--trans-dur) var(--trans-timing1);}body{background-color:var(--bg);display:flex;height:100vh;}.switch{display:flex;margin:auto;}.switch__emoji{box-shadow:0.25em 0.25em 0.125em rgba(0,0,0,0.3);overflow:hidden;pointer-events:none;top:0.25em;left:0.25em;width:1em;height:1em;}[dir='rtl'] .switch__emoji{right:0.25em;left:auto;}.switch__emoji,.switch__emoji:before,.switch__emoji:after,.switch__emoji-eye,.switch__emoji-mouth,.switch__emoji-face{display:block;position:absolute;}.switch__emoji,.switch__emoji:before,.switch__emoji:after,.switch__emoji-eye,.switch__emoji-mouth{border-radius:50%;}.switch__emoji:before,.switch__emoji:after{content:'';width:100%;height:100%;transform:translateZ(0);}.switch__emoji:before{background-color:#f2c40d;box-shadow:-0.25em -0.25em 0.25em #c29d0a inset,0.1875em 0.1875em 0.25em #f9e286 inset;}.switch__emoji:after{box-shadow:0 0 0.125em 0.0625em rgba(245,208,61,0.5) inset;}.switch__emoji,.switch__emoji-face{transform-style:preserve-3d;transition:transform var(--trans-dur) var(--trans-timing2);}.switch__emoji-eye,.switch__emoji-mouth{backface-visibility:hidden;}.switch__emoji-eye{border:0.0625em solid hsl(var(--hue),10%,10%);border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;top:50%;left:50%;width:0.25em;height:0.25em;transform:translate(-50%,-50%) rotateY(-22.5deg) translateZ(0.5em)
          rotateZ(45deg);}.switch__emoji-eye + .switch__emoji-eye{transform:translate(-50%,-50%) rotateY(22.5deg) translateZ(0.5em)
          rotateZ(45deg);}.switch__emoji-mouth{background-image:radial-gradient(
            100% 100% at 50% 100%,#f2180d 20%,#f5463d 33%,rgba(245,70,61,0) 35%
          ),radial-gradient(
            100% 100% at 75% 113%,black 26%,rgba(0,0,0,0) 35%
          ),linear-gradient(
            rgba(0,0,0,0) 50%,black 50% 55%,hsl(var(--hue),10%,10%) 65%
          );top:50%;left:50%;width:0.5em;height:0.5em;transform:translate(-50%,-50%) rotateX(-15deg) translateZ(0.5em);}.switch__emoji-face{top:0;left:0;width:100%;height:100%;transform:rotateY(0);}.switch__emoji-face + .switch__emoji-face{transform:rotateY(-180deg);}.switch__emoji-face--sad .switch__emoji-eye{background-color:hsl(var(--hue),10%,10%);border:0;width:0.1875em;height:0.1875em;}.switch__emoji-face--sad .switch__emoji-mouth{background-image:none;border:0.0625em solid transparent;border-top-color:hsl(var(--hue),10%,10%);transform:translate(-50%,0) rotateX(-20deg) translateZ(0.5em);}.switch__input,.switch__label{-webkit-tap-highlight-color:transparent;}.switch__input{background-color:hsl(var(--hue),10%,80%);border-radius:0.75em;box-shadow:0.0625em 0.0625em 0.0625em white inset,-0.0625em -0.0625em 0.0625em hsl(var(--hue),10%,80%) inset,0 0 0 0.125em hsl(var(--hue),10%,90%) inset,0.25em 0.25em 0.125em rgba(0,0,0,0.3) inset,0.0625em 0.0625em 0.0625em rgba(0,0,0,0.3);cursor:pointer;display:block;width:2.5em;height:1.5em;-webkit-appearance:none;appearance:none;transition:background-color var(--trans-dur) var(--trans-timing1),box-shadow var(--trans-dur) var(--trans-timing1);}.switch__input:checked{background-color:#0ac213;}.switch__input:checked + .switch__emoji{transform:translateX(100%);}[dir='rtl'] .switch__input:checked + .switch__emoji{transform:translateX(-100%);}.switch__input:checked + .switch__emoji .switch__emoji-face{transform:rotateY(179.99deg);}[dir='rtl'] .switch__input:checked + .switch__emoji .switch__emoji-face{transform:rotateY(-179.99deg);}.switch__input:checked
        + .switch__emoji
        .switch__emoji-face
        + .switch__emoji-face{transform:rotateY(0);}[dir='rtl']
        .switch__input:checked
        + .switch__emoji
        .switch__emoji-face
        + .switch__emoji-face{transform:rotateY(-360deg);}.switch__label,.switch__wrapper{display:block;}.switch__label{margin-inline-start:0.5em;overflow:hidden;position:absolute;width:1px;height:1px;}.switch__wrapper{position:relative;}@media (prefers-color-scheme:dark){:root{--bg:hsl(var(--hue),10%,10%);--fg:hsl(var(--hue),10%,90%);}.switch__input{background-color:hsl(var(--hue),10%,20%);box-shadow:0.0625em 0.0625em 0.0625em hsl(var(--hue),10%,25%) inset,-0.0625em -0.0625em 0.0625em hsl(var(--hue),10%,20%) inset,0 0 0 0.125em hsl(var(--hue),10%,30%) inset,0.25em 0.25em 0.125em rgba(0,0,0,0.3) inset,0.0625em 0.0625em 0.0625em rgba(0,0,0,0.3);}}</style>
  </head>
  <body>
    <label class="switch">
      <span class="switch__wrapper">
        <input class="switch__input" type="checkbox" role="switch" checked />
        <span class="switch__emoji">
          <span class="switch__emoji-face switch__emoji-face--sad">
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-mouth"></span>
          </span>
          <span class="switch__emoji-face">
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-eye"></span>
            <span class="switch__emoji-mouth"></span>
          </span>
        </span>
      </span>
      <span class="switch__label">Power</span>
    </label>
  </body>
</html>

√完整版代码
1.关注公众号
2.后台留言”嘻嘻不嘻嘻“即可

【声明】内容源于网络

码途钥匙

欢迎来到 Python 学习乐园！这里充满活力，分享前沿实用知识技术。新手或开发者，都能找到价值。一起在这个平台，以 Python 为引，开启成长之旅，探索代码世界，共同进步。携手 Python，共赴精彩未来，快来加入我们吧！

内容 992

粉丝 0

码途钥匙欢迎来到 Python 学习乐园！这里充满活力，分享前沿实用知识技术。新手或开发者，都能找到价值。一起在这个平台，以 Python 为引，开启成长之旅，探索代码世界，共同进步。携手 Python，共赴精彩未来，快来加入我们吧！

总阅读1

粉丝0

内容992