css实现灯泡摇摆点击点亮动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现灯泡摇摆点击点亮动画效果代码

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

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

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

  
  
  
<style>
:root {
  --shadow: #52595f;
  --light: #838c95;
  --light: #fff6d560;
  --light: #ffff4e33;
  --bulb: #f5dc7f;
  --cone: #f1a863;
  --cone2: #e2a164;
  --cable: #d14b48;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #000, var(--shadow));
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lamp {
  width: 400vw;
  height: 400vh;
  background: radial-gradient(circle at 50% 30%, var(--bulb) 0 3.5vmin, #fff0 calc(3.5vmin + 1px) 100%), conic-gradient(from 0deg at calc(50% - 2px) 50%, var(--cable) 0 25%, #fff0 0 100%), conic-gradient(from 119deg at 50% 49%, #fff0 1deg, var(--cone2) 2deg 12deg, var(--cone) 14deg 120deg, #fff0 121deg 100%), conic-gradient(from 119deg at 50% 50%, #fff0 1.5deg, var(--light) 2deg 120deg, #fff0 120.5deg 100%);
  background-repeat: no-repeat;
  background-size: 8vmin 6vmin, 4px 100%, 32vmin 19vmin, 400vw 400vh;
  background-position: 50% calc(50% + 12.45vmin), 50% 50%, 50% 50%, 50% 50%;
  transform-origin: 50% 0;
  position: absolute;
  top: -160vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease 0s;
  transform: rotateY(180deg);
  mix-blend-mode: hard-light;
  animation: start 4s ease-in-out 0s 1;
}

@keyframes start {
  0% {
    transform: rotateY(180deg) translateY(-15vmin) rotate(-12deg);
  }
  30% {
    transform: rotateY(180deg) translateY(-10vmin) rotate(12deg);
  }
  60% {
    transform: rotateY(180deg) translateY(-5vmin) rotate(-6deg);
  }
  80% {
    transform: rotateY(180deg) translateY(-2.5vmin) rotate(3deg);
  }
  100% {
    transform: rotateY(180deg) translateY(0vmin) rotate(0deg);
  }
}
.lamp:before {
  content: "";
  position: absolute;
  width: 5vmin;
  height: 3vmin;
  background: var(--cable);
  border-radius: 2vmin 2vmin 0 0;
  margin-top: -0.7vmin;
}

.cam {
  transform: translateZ(60vmin);
  float: left;
  width: 11.11%;
  height: 11.11%;
  z-index: 1;
  position: relative;
}
.cam:nth-child(1):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(-24deg);
}
.cam:nth-child(2):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(-18deg);
}
.cam:nth-child(3):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(-12deg);
}
.cam:nth-child(4):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(-6deg);
}
.cam:nth-child(5):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(0deg);
}
.cam:nth-child(6):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(6deg);
}
.cam:nth-child(7):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(12deg);
}
.cam:nth-child(8):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(18deg);
}
.cam:nth-child(9):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-40vh) rotate(24deg);
}
.cam:nth-child(10):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(-24deg);
}
.cam:nth-child(11):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(-18deg);
}
.cam:nth-child(12):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(-12deg);
}
.cam:nth-child(13):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(-6deg);
}
.cam:nth-child(14):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(0deg);
}
.cam:nth-child(15):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(6deg);
}
.cam:nth-child(16):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(12deg);
}
.cam:nth-child(17):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(18deg);
}
.cam:nth-child(18):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-30vh) rotate(24deg);
}
.cam:nth-child(19):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(-24deg);
}
.cam:nth-child(20):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(-18deg);
}
.cam:nth-child(21):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(-12deg);
}
.cam:nth-child(22):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(-6deg);
}
.cam:nth-child(23):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(0deg);
}
.cam:nth-child(24):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(6deg);
}
.cam:nth-child(25):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(12deg);
}
.cam:nth-child(26):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(18deg);
}
.cam:nth-child(27):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-20vh) rotate(24deg);
}
.cam:nth-child(28):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(-24deg);
}
.cam:nth-child(29):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(-18deg);
}
.cam:nth-child(30):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(-12deg);
}
.cam:nth-child(31):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(-6deg);
}
.cam:nth-child(32):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(0deg);
}
.cam:nth-child(33):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(6deg);
}
.cam:nth-child(34):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(12deg);
}
.cam:nth-child(35):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(18deg);
}
.cam:nth-child(36):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(-10vh) rotate(24deg);
}
.cam:nth-child(37):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(-24deg);
}
.cam:nth-child(38):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(-18deg);
}
.cam:nth-child(39):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(-12deg);
}
.cam:nth-child(40):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(-6deg);
}
.cam:nth-child(41):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(0deg);
}
.cam:nth-child(42):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(6deg);
}
.cam:nth-child(43):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(12deg);
}
.cam:nth-child(44):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(18deg);
}
.cam:nth-child(45):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(0vh) rotate(24deg);
}
.cam:nth-child(46):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(10vh) rotate(-24deg);
}
.cam:nth-child(47):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(10vh) rotate(-18deg);
}
.cam:nth-child(48):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(10vh) rotate(-12deg);
}
.cam:nth-child(49):hover ~ .content .lamp {
  transform: rotateY(180deg) translateY(10vh) rotate(-6deg);
}
.c.........完整代码请登录后点击上方下载按钮下载查看