div+css实现灯笼挂起动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现灯笼挂起动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; } * { /*outline: 1px dotted yellow;*/ box-sizing: border-box; } .stage { --c-bg: hsl(262,39%,20%); align-items: center; background-color: var(--c-bg); display: flex; height: 100vh; justify-content: center; overflow-y: hidden; width: 100vw; } .scene { height: 500px; position: relative; width: 400px; } .scene::before { --c-bg: hsl(262,39%,22%); --c-glow: hsl(262,39%,20%); --size: 600px; animation: scene-anim .6s infinite steps(6); background: var(--c-bg); border-radius: var(--size); box-shadow: inset 0 0 0 3px var(--c-glow); content: ''; height: var(--size); left: calc(50% - (var(--size) /2)); position: absolute; top: -50px; width: var(--size); } @keyframes scene-anim { 0% { box-shadow: inset 0 0 0 3px var(--c-glow); } 20% { box-shadow: inset 0 0 0 8px var(--c-glow); } 40% { box-shadow: inset 0 0 0 2px var(--c-glow); } 60% { box-shadow: inset 0 0 0 6px var(--c-glow); } 80% { box-shadow: inset 0 0 0 3px var(--c-glow); } 100% { box-shadow: inset 0 0 0 5px var(--c-glow); } } .halo { --c-1: hsl(257,39%,27%); --c-2: hsl(259,38%,33%); --c-3: hsl(322,41%,43%); --c-4: hsl(346,86%,65%); --s-core: 100px; --s-1: 120px; --s-2: 90px; --s-3: 60px; --s-4: 30px; } .halo i { --c: var(--c-1); --s: var(--s-1); animation: 4s halo-anim .4s ease-in-out infinite; background-color: var(--c); box-shadow: 0 0 0 var(--s) var(--c); border-radius: 50%; display: block; left: calc(50% - (var(--s-core) / 2)); height: var(--s-core); position: absolute; top: 50%; transform-origin: center center; width: var(--s-core); } .halo i:nth-of-type(2) { animation-delay: .3s; --c: var(--c-2); --s: var(--s-2); } .halo i:nth-of-type(3) { animation-delay: .2s; --c: var(--c-3); --s: var(--s-3); } .halo i:nth-of-type(4) { animation-delay: .1s; --c: var(--c-4); --s: var(--s-4); } .halo-star { --size: calc(var(--s-core) + (var(--s-1) * 2) - 15px); animation: halo-star-anim linear 5s forwards infinite; background: radial-gradient(circle at center, var(--c-1) 69.5%, transparent 69.5%), linear-gradient(to right, transparent 50%, var(--c-3) 50%, var(--c-3) 52%, rgba(255, 255, 255, .1) 52%, transparent 70%); border-radius: 50%; clip: rect(0px var(--size) calc(var(--size) / 2) 0px); display: block; height: var(--size); left: calc(50% - (var(--size) / 2)); position: absolute; transform-origin: center center; top: calc(50% - var(--s-1) + 8px); width: var(--size); } .halo-star:nth-child(2) { animation-delay: calc(5s / 3); } .halo-star:nth-child(3) { animation-delay: calc((5s / 3) * 2); } @keyframes halo-anim { 50% { transform: scale(1.05); } } @keyframes halo-star-anim { 100% { transform: rotateZ(-360deg); } } .lantern { --c-lantern-body: hsl(262,38%,20%); --c-lantern-light: hsl(23,98%,75%); --c-lantern-glow: hsl(343,83%,63%); display: flex; flex-direction: column; left: calc(50%); position: absolute; transform: translateX(-50%); z-index: 1; } .lantern-handle { border: 6px solid hsl(257,41%,27%); border-radius: 50px; height: 105px; width: 200px; } .lantern-inner { animation: lantern-anim 1.2s ease-in-out alternate infinite; margin-top: -5px; transform-origin: top center; } .lantern-chain { height: 60px; } .lantern-chain::before { --c: hsl(260,38%,34%); background-color: var(--c); box-shadow: 0 0 0 5px var(--c), 0 20px 0 var(--c), 0 35px 0 var(--c), 0 50px 0 var(--c); border-radius: 50%; content: ''; display: block; height: 10px; margin: 0 auto; width: 10px; } .lantern-head::before, .lantern-head::after { background: var(--c-lantern-body); border-radius: 5px; content: ''; display: block; height: 15px; } .lantern-head::before { margin: 0 auto; width: 100px; } .lantern-head::after { border-radius: 3px; height: 30px; margin: 3px auto; width: 60px; } .lantern-body { perspective: 350px; position: relative; } .lantern-body::before { background-color: var(--c-lantern-light); border: 8px solid var(--c-lantern-body); border-radius: 50px; box-shadow: inset 0 0 0 5px var(--c-lantern-light), inset 0 0 0 20px var(--c-lantern-glow); content: ''; display: block; height: 195px; margin: 0 auto; perspective: 100px; transform: rotateX(20deg) translateY(-20px); transform-origin: center center; width: 120px; } .lantern-body::after { --c: hsl(321,41%,42%); background-color: var(--c); border-radius: 4px; box-shadow: -5px 161px 0 1px var(--c), 5px 161px 0 1px var(--c); content: ''; display: block; height: 7px; margin: -7px auto 0; transform: translateY(-195px); width: 40px; } .lanter.........完整代码请登录后点击上方下载按钮下载查看
网友评论0