div+css实现仪表指针型单选点击切换摇摆效果代码-html代码-BFW代码库

div+css实现仪表指针型单选点击切换摇摆效果代码

代码语言：html

所属分类：其他

代码描述：div+css实现仪表指针型单选点击切换摇摆效果代码

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

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

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


  
<style>
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");

:root {
    --canvas: 220;
    --bg: hsl(var(--canvas), 15%, 22%);
    --fg: hsl(var(--canvas), 39%, 95%);
    --link: hsl(var(--canvas), 90%, 80%);
    --linkh: hsl(150, 95%, 70%);
    --wgt: 200;
}

body,
html {
    font-family: heebo, sans-serif;
    color: var(--fg);
    background: var(--bg);
    font-weight: var(--wgt);
    padding: 0;
    display: grid;
    place-items: center;
    height: 100%;
}

a {
    color: var(--link);
    text-decoration: none;
    font-weight: 450;
    transition: all 0.3s ease;
}
a:hover,
a:focus,
a:active {
    color: var(--linkh);
}
button {
    background: hsl(var(--canvas), 10%, 10%);
    color: inherit;
    border: none;
    border-radius: 0.5em;
    padding: 0.25em 0.5em;
    font-family: inherit;
    font-size: inherit;
}
.social-icon {
    stroke-width: 1.25;
    stroke: currentColor;
    fill: transparent;
    background: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    z-index: 10;
    animation: iconsLoad 10s ease both 5s;
}
.social-icon path {
    fill: none;
}
.social-icon.twitter {
    right: 40px;
    animation-delay: 4s;
}
.social-icon.codepen {
    position: absolute;
    bottom: 10px;
    right: 80px;
    width: max-content;
    animation-delay: 3s;
}
@keyframes iconsLoad {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
:root {
  --blue: hsl(194deg 100% 65%);
  --orange: hsl(17deg 94% 65%);
}

.container {
  display: flex;
  width: 160px;
  height: 80px;
  border-radius: 80px 80px 0 0;
  border: 1px solid hsla(190deg, 30%, 15%, 1);
  display: grid;
  position: relative;
}

.container::before,
.container::after {
  content: "";
  width: 44px;
  height: 30px;
  background: black;
  border-radius: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(20deg) translateX(2px) translateY(-3px);
  z-index: 0;
  box-shadow: 0 0 30px var(--orange), 0 0 20px var(--orange), 0 0 50px var(--orange);
  opacity: 0;
  transition: all 0.5s ease;
}
.container::after {
  left: auto;
  right: 0;
  transform: rotate(-20deg) translateX(-2px) translateY(-3px);
  box-shadow: 0 0 30px var(--blue), 0 0 20px var(--blue), 0 0 50px var(--blue);
}

.toggle {
  position: relative;
  width: 160px;
  height: 8.........完整代码请登录后点击上方下载按钮下载查看