svg+css实现小人走路吹泡泡爆炸动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现小人走路吹泡泡爆炸动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --pink: #F0466D; --pink-a: #da3a5f; --green: #18D09E; --green-a: #17b68a; --purple: #381084; --purple-a: #2a0869; --white: #F2F2F2; --white-a: #e8e7e7; } /*********************/ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; user-select: none; outline: none; appearance: none; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; } /***********************/ /***********************/ body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; overflow: hidden; background-color: var(--pink); animation: colors ease-in-out 10000ms infinite; } /**/ .svgs { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); } .svg-icon { width: 30px; height: 30px; } .svg-icon:hover { transform: scale(1.1); } .svg-icon path, .svg-icon polygon, .svg-icon rect { fill: white; } .svg-icon circle { stroke: white; stroke-width: 1; } .s { display: none; } /**/ .main { width: 60vw; height: 40vw; } .c { position: absolute; width: 100%; height: 100%; animation: c ease-in-out 300ms infinite alternate; } .boy { position: absolute; left: 22vw; bottom: 6vw; width: 11.5vw; height: 28vw; animation: boy ease-in-out 300ms infinite alternate; } .shadow { position: absolute; bottom: 4vw; width: 10vw; left: 22.5vw; height: 2vw; opacity: 0.8; border-radius: 50%; background-color: var(--pink-a); animation: shadow ease-in-out 150ms infinite alternate; } .torso { position: absolute; bottom: 5.2vw; right: 1.5vw; width: 8.9vw; height: 22vw; background-image: linear-gradient(96deg, transparent 2.6vw, var(--white) 2.6vw); border-top-left-radius: 5.1vw; border-top-right-radius: 2vw; border-bottom-left-radius: 2.5vw; border-bottom-right-radius: 1.5vw; animation: torso ease-in-out 300ms infinite alternate; } .face { position: absolute; left: 5.5vw; top: 5.6vw; width: 4vw; height: 3.25vw; transform-origin: bottom right; transform: rotateZ(3deg); animation: face ease-in-out 300ms infinite alternate; } .face__eye-l, .face__eye-r { position: absolute; top: -0.5vw; width: 1.5vw; height: 1.5vw; border-radius: 50%; border-left: 0.25vw solid var(--purple); border-top: 0.25vw solid var(--purple); border-right: 0.25vw solid transparent; border-bottom: 0.25vw solid transparent; transform: rotateZ(-135deg); } .face__eye-r { right: 0; } .face__nose { position: absolute; top: 0.25vw; left: 1.4vw; width: 1.25vw; height: 1.25vw; border-left: 0.6vw solid var(--pink); border-top: 0.6vw solid transparent; border-bottom: 0.6vw solid transparent; transform: rotateZ(-90deg); } .face__mouth { position: absolute; bottom: 0; left: 1.6vw; width: 1.25vw; height: 1.5vw; } .face__mouth::before, .face__mouth::after { content: ""; position: absolute; width: 1vw; height: 1.5vw; border-radius: 50%; border-left: 0.3vw solid var(--purple); border-top: 0.3vw solid var(--purple); border-right: 0.3vw solid transparent; border-bottom: 0.3vw solid transparent; transform: rotateZ(75deg); } .face__mouth::after { top: 0.55vw; right: -0.025vw; transform: rotateZ(-180deg); width: 1.5vw; height: 1vw; } .face__bubble { position: absolute; left: 2.5vw; bottom: 0; width: 0; height: 0; border-radius: 50% 50% 50% 50%/100% 50% 50% 0%; background-color: var(--green); animation: bubble ease-in-out 5000ms infinite; z-index: 100; mix-blend-mode: difference; } .cap { position: absolute; left: 0; top: 0.5vw; width: 10vw; height: 4.15vw; transform-origin: bottom right; transform: rotateZ(3deg); } .cap__bottom { position: absolute; bottom: 0; right: 0; width: 100%; height: 1vw; border-radius: 1vw; background-color: var(--green); animation: cap-bottom ease-in-out 300ms infinite alternate; } .cap__center { position: absolute; bottom: 0.25vw; right: 0.25vw; width: 2.25vw; height: 2.4vw; border-top-left-radius: 1.5vw; border-top-right-radius: 1.75vw; border-bottom-left-radius: 0.5vw; background-color: var(--white); animation: cap-center ease-in-out 300ms infinite alternate; } .cap__top { position: absolute; bottom: 0; right: 0; width: 6.8vw; height: 100%; border-top-left-radius: 1.5vw; border-top-right-radius: 2vw; border-bottom-left-radius: 0.25vw; border-bottom-right-radius: 0.25vw; background-color: var(--green); animation: cap-top ease-in-out 300ms infinite alternate; } .cap__top::before { content: ""; position: absolute; width: 0.5vw; height: 0.35vw; background-color: var(--white); left: calc(50% - .25vw); top: -0.35vw; border-top-left-radius: 0.25vw; border-top-right-radius: 0.25vw; } .hair-a__b { animation: hair-bb ease-in-out 300ms infinite alternate; } .hair-a, .hair-b { position: absolute; left: 0; top: 1.85vw; width: 11vw; height: 5.5vw; transform-origin: top left; transform: rotateZ(3deg); animation: hair-a ease-in-out 300ms infinite alternate; } .hair-a--i, .hair-b--i { position: absolute; border-radius: 1vw; background-color: var(--purple); } .hair-a__a, .hair-b__a { top: 0.9vw; right: 0.2vw; width: 3.1vw; height: 1.1vw; } .hair-a__b, .hair-b__b { top: 0.9vw; left: 8.5vw; width: 2.35vw; height: 1.1vw; transform-origin: bottom left; transform: rotateZ(-45deg); } .hair-a__c, .hair-b__c { top: 0.25vw; left: 7.4vw; width: 1.1vw; height: 1.75vw; } .hair-b__a { top: 1.6vw; left: 2.5vw; width: 3.5vw; height: 1.1vw; } .hair-b__b { top: 2vw; left: 3vw; width: 1.5vw; height: 1.5vw; border-radius: 50%; } .hair-b__c { top: 3.1vw; left: 2.25vw; width: 1.75vw; height: 1.75vw; border-radius: 50%; } .hair-b__d { top: 2vw; left: 3.25vw; width: 1vw; height: 3.25vw; } .ear { position: absolute; top: 6.5vw; left: 1.85vw; width: 8.75vw; height: 1.75vw; transform-origin: top left; transform: rotateZ(3deg); animation: ear ease-in-out 300ms infinite alternate; } .ear-l, .ear-r { position: absolute; width: 1.75vw; height: 1.75vw; background-color: var(--white); border-top-left-radius: 1vw; border-bottom-left-radius: 1vw; border-bottom-right-radius: 1vw; animation: ear-l ease-in-out 300ms infinite alternate; } .ear-l { display: flex; justify-content: center; align-items: center; } .ear-l::before, .ear-l::after { content: ""; position: absolute; width: 0.175vw; height: 60%; border-radius: 0.5vw; background-color: var(--purple); transform: rotateZ(45deg); } .ear-l::after { width: 60%; height: 0.175vw; } .ear-r { right: 0; border-radius: 50%; background-color: var(--white-a); } .jacket { position: absolute; bottom: 6vw; left: 0.85vw; width: 9.4vw; height: 5.25vw; transform-origin: bottom left; transform: rotateZ(3deg); animation: jacket ease-in-out 600ms infinite alternate; background-image: linear-gradient(92deg, transparent 0.5vw, var(--green) 0.5vw, var(--green) 5.45vw, transparent 5.45vw, transparent 8.25vw, var(--green) 8.25vw); border-top-left-radius: 1.5vw; border-top-right-radius: 0.5vw; border-bottom-left-radius: 1.5vw; border-bottom-right-radius: 0.5vw; } .pants { position: absolute; bottom: 5.25vw; left: 1.4vw; width: 8.5vw; height: 1.5vw; transform-origin: bottom left; transform: rotateZ(3deg); background-color: var(--purple); border-bottom-left-radius: 2vw; border-bottom-right-radius: 2vw; } .t-shirt { position: absolute; bottom: 6.5vw; left: 5.4vw; width: 4vw; height: 4vw; transform-origin: bottom left; transform: rotateZ(3deg); background-image: repeating-linear-gradient(to bottom, var(--pink) 0, var(--pink) 0.5vw, var(--white) 0.5vw, var(--white) 1vw); } .t-shirt::after { content: ""; position: absolute; top: -2vw; left: 0.8vw; width: 3vw; height: 3vw; border-radius: 50%; background-color: var(--white); animation: t-shirt ease-in-out 600ms infinite alternate; } .arm-l { position: absolute; bottom: 5vw; left: -0.5vw; width: 4vw; height: 4vw; transform-origin: top left; transform: rotateZ(-30deg); border-radius: 50%; animation: arm-l ease-in-out 600ms infinite alternate; border-left: 0.75vw solid var(--green-a); border-top: 0.75vw solid var(--green-a); border-right: 0.75vw solid transparent; border-bottom: 0.75vw solid transparent; } .arm-l::before { content: ""; position: absolute; width: 1vw; height: 1vw; bottom: -0.5vw; left: 0; border-left: 0.25vw solid var(--purple); transform: rotateZ(30deg); } .arm-r { position: absolute; bottom: 5vw; right: 0.5vw; width: 4vw; height: 4vw; transform-origin: top left; transform: rotateZ(-30deg); border-radius: 50%; animation: arm-r ease-in-out 600ms infinite alternate; border-left: 0.75vw solid transparent; border-top: 0.75vw solid transparent; border-right: 0.75vw solid var(--green-a); border-bottom: 0.75vw solid var(--green-a); } .leg { position: absolute; bottom: -0.2vw; width: 3.35vw; height: 5.5vw; } .leg-l { left: 1vw; animation: leg-l ease-in-out 600ms infinite alternate; } .leg-l .leg-top { animation: leg-top-l ease-in-out 600ms infinite alternate; } .leg-l .leg-bottom { animation: leg-bottom-l ease-in-out 600ms infinite alternate; } .leg-l .leg-foot { animation: leg-foot-l ease-in-out 600ms infinite alternate; } .leg-r { left: 3vw; animation: leg-r ease-in-out 600ms infinite alternate 0ms; } .leg-r .leg-top { animation: leg-top-r ease-in-out 600ms infinite alternate 0ms; background-color: var(--purple-a); } .leg-r .leg-bottom { animation: leg-bottom-r ease-in-out 600ms infinite alternate 0ms; background-color: var(--purple-a); } .leg-r .leg-foot { animation: leg-foot-r ease-in-out 600ms infinite alternate 0ms; } .leg-r .leg-foot::before, .leg-r .leg-foot::after { background-color: var(--white-a); } .leg-top { position: absolute; top: 0; right: -0.5vw; width: 1vw; height: 3vw; transform-origin: top right; transform: rotateZ(25deg); background-color: var(--purple); border-top-left-radius: 0.5vw; border-top-right-radius: 0.5vw; } .leg-bottom { position: absolute; top: 100%; right: 0; width: 100%; height: 3vw; transform-origin: top right; transform: rotateZ(5deg); background-color: var(--purple); } .leg-foot { position: absolute; top: 50%; left: -0.75vw; width: 2.75vw; height: 1vw; transform-origin: top right; transform: rotateZ(-30deg); overflow: hidden; } .l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0