摇摆的灯光
点击运行看演示效果！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摇摆的灯光</title>
<style>
*{padding:0;margin:0}body{height:100vh;background:#212534;display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif;font-size:50px}.room{position:relative;max-width:600px;width:100%;height:400px;border:1px solid white;display:flex;justify-content:center;align-items:flex-end}.room:before{content:'';position:absolute;top:0;width:40px;height:10px;background:#D3AF37;border-radius:0px 0px 10px 10px}.lamp{position:absolute;inset:0 auto 0 auto;width:40px;height:150px;display:flex;justify-content:center;animation:move 3s cubic-bezier(0.645,0.045,0.355,1.000) infinite alternate;transform-origin:top center}.lamp .line{width:2px;height:100%;background:#D3AF37}.lamp .base{position:absolute;bottom:0;width:100%;height:30px;background:#D3AF37;transform:translateY(100%);border-radius:50% 50% 50% 50% / 50% 50% 0 0;perspective:4px}.light{position:absolute;left:50%;bottom:0;transform-style:preserve-3d;transform:translate(-50%,calc(100% + 9px)) rotateX(3deg);width:55px;height:60px;background:white;box-shadow:0 1px 8.3px 5.8px #fff,0 1px 10.5px 0px #fff}.text{position:relative;width:100%;height:50%;display:flex;align-items:center;justify-content:center;z-index:1}.text span{color:#212534;mix-blend-mode:difference}@keyframes move{0%{transform:rotate(35deg)}100%{transform:rotate(-35deg)}}
</style>
</head>
<body>
<div class="room">
<div class="lamp">
<div class="line"></div>
<div class="base">
<div class="light"></div>
</div>
</div>
<div class="text">
<span>追求完美BLOG</span>
</div>
</div>
</body>
</html>