div+css实现深海不明生物动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现深海不明生物动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { transform-style: preserve-3d; box-sizing: border-box; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; perspective: 100vmin; background: radial-gradient(circle at 50% 100%,#000, #20113a); } .creature { width: 50vmin; height: 50vmin; background: /*radial-gradient(#fff4, 25vmin, #fff0 25vmin),*/ #ffF0; position: relative; transform: rotateX(-25deg); transform: rotateX(-210deg) rotateY(510deg) rotatez(175deg) scaleY(2) translateY(-15vmin); display: flex; align-items: center; justify-content: center; } .creature div { --sz: 80%; --dl: 0.1s; width: var(--sz); height: var(--sz); position: absolute; border-radius: 100%; transform: rotateX(90deg) translateZ(-5vmin); filter: brightness(2.2); } .creature div:nth-child(1) { filter: hue-rotate(-60deg) brightness(2.5); } .creature div:nth-child(2) { transform: rotateX(90deg) translateZ(-6vmin); --sz: 77%; --dl: -0.1s; filter: hue-rotate(-50deg) brightness(2); } .creature div:nth-child(3) { transform: rotateX(90deg) translateZ(-7vmin); --sz: 74%; --dl: -0.2s; filter: hue-rotate(-45deg) brightness(1.75); } .creature div:nth-child(4) { transform: rotateX(90deg) translateZ(-8vmin); --sz: 71%; --dl: -0.3s; filter: hue-rotate(-40deg) brightness(1.5); } .creature div:nth-child(5) { transform: rotateX(90deg) translateZ(-9vmin); --sz: 68%; --dl: -0.4s; filter: hue-rotate(-35deg) brightness(1.5); } .creature div:nth-child(6) { transform: rotateX(90deg) translateZ(-10vmin); --sz: 65%; --dl: -0.5s; filter: hue-rotate(-30deg) brightness(1.5); } .creature div:nth-child(7) { transform: rotateX(90deg) translateZ(-11vmin); --sz: 62%; --dl: -0.6s; filter: hue-rotate(-25deg) brightness(1.5); } .creature div:nth-child(8) { transform: rotateX(90deg) translateZ(-12vmin); --sz: 59%; --dl: -0.7s; filter: hue-rotate(-20deg) brightness(1.5); } .creature div:nth-child(9) { transform: rotateX(90deg) translateZ(-13vmin); --sz: 56%; --dl: -0.8s; filter: hue-rotate(-15deg) brightness(1.5); } .creature div:nth-child(10) { transform: rotateX(90deg) translateZ(-14vmin); --sz: 53%; --dl: 0.9s; filter: hue-rotate(-10deg) brightness(1.5); } .creature div:nth-child(11) { transform: rotateX(90deg) translateZ(-15vmin); --sz: 50%; --dl: -1s; filter: hue-rotate(-5deg) brightness(1.5); } .creature div:nth-child(12) { transform: rotateX(90deg) translateZ(-16vmin); --sz: 47%; --dl: -1.1s; } .creature div:nth-child(13) { transform: rotateX(90deg) translateZ(-17vmin); --sz: 44%; --dl: -1.2s; } .creature div:nth-child(14) { transform: rotateX(90deg) translateZ(-18vmin); --sz: 41%; --dl: -1.3s; } .creature div:nth-child(15) { transform: rotateX(90deg) translateZ(-19vmin); --sz: 38%; --dl: -1.4s; } .creature div:nth-child(16) { transform: rotateX(90deg) translateZ(-20vmin); --sz: 35%; --dl: -1.5s; filter: hue-rotate(5deg) brightness(1.5); } .creature div:nth-child(17) { transform: rotateX(90deg) translateZ(-21vmin); --sz: 32%; --dl: -1.6s; filter: hue-rotate(10deg) brightness(1.5); } .creature div:nth-child(18) { transform: rotateX(90deg) translateZ(-22vmin); --sz: 29%; --dl: -1.7s; filter: hue-rotate(15deg) brightness(1.5); } .creature div:nth-child(19) { transform: rotateX(90deg) translateZ(-23vmin); --sz: 26%; --dl: -1.8s; filter: hue-rotate(20deg) brightness(1.75); } .creature div:nth-child(20) { transform: rotateX(90deg) translateZ(-24vmin); --sz: 23%; --dl: -1.9s; filter: hue-rotate(25deg) brightness(2); } .creature div:nth-child(21) { transform: rotateX(90deg) translateZ(-25vmin); --sz: 20%; --dl: -2s; filter: hue-rotate(30deg) brightness(2.5); } .creature div:before { --c1: #6a36c5; --c2: #9255ff; --c3: #7b44dd; filter: brightness(1.25); content: &q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0