css实现三维霓虹灯闪烁文字动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维霓虹灯闪烁文字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap'); :root { --c2: #607d8b; --c3: #041e31; --c4: #098a8a; --nb: #0ff; --ng: #0f0; } body { margin: 0; box-sizing: border-box; width: 100vw; height: 100vh; overflow: hidden; font-family: 'Russo One', Arial, Helvetica, sans-serif; background-color: #0d324d; background-image: radial-gradient(#0d324d , #121212); } body * { box-sizing: border-box; } .container { width: 100vw; height: 100vh; position: absolute; overflow: hidden; left: 0; top: 0; perspective: 100vmin; } .container > div { float: left; width: 100%; } .thanks, .number, .followers { font-size: 15vmin; text-align: center; color: #fff; height: 25vh; line-height: 25vh; } .thanks { animation: blink 4.5s infinite alternate; } .followers { animation: blink 6.75s infinite alternate; filter: hue-rotate(160deg); } .tilt { animation: tilt 8s ease-in-out 0s infinite alternate; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; } .number { height: 50vh; display: flex; justify-content: center; align-items: center; font-size: 45vmin; transform-style: preserve-3d; animation: spin 6s ease-in-out 0s infinite alternate; } .number > * { position: absolute; } .number span { z-index: -1; transform: translateZ(-0.3vmin); transform-style: preserve-3d; position: absolute; color: var(--c2); } .number span:before, .number span:after { content: "500"; position: absolute; color: var(--c3); transform: translateZ(0.25vmin); transform-style: preserve-3d; } .number span:after { top: 0; left: 0; color: var(--c4); transform: translateZ(-0.25vmin); } .number span:nth-child(1):before { color: #041e3138; text-shadow: 0 0 1.5vmin var(--nb); } .number span:nth-child(2) { transform: translateZ(-0.6vmin); } .number span:nth-child(3) { transform: translateZ(-0.9vmin); } .number span:nth-child(4) { transform: translateZ(-1.2vmin); } .number span:nth-child(5) { transform: translateZ(-1.5vmin); } .number span:nth-child(6) { transform: translateZ(-1.8vmin); } .number span:nth-child(7) { transform: translateZ(-2.1vmin); } .number span:nth-child(8) { transform: translateZ(-2.4vmin); } .number span:nth-child(9) { transform: translateZ(-2.7vmin); } .number span:nth-child(10) { transform: translateZ(-3vmin); } .number span:nth-child(11) { transform: translateZ(-3.3vmin); } .number span:nth-child(12) { transform: translateZ(-3.6vmin); } .number span:nth-child(13) { transform: translateZ(-3.9vmin); } .number span:nth-child(14) { transform: translateZ(-4.2vmin); } .number span:nth-child(15) { transform: translateZ(-4.5vmin); } .number span:nth-child(16) { transform: translateZ(-4.8vmin); } .number span:nth-ch.........完整代码请登录后点击上方下载按钮下载查看
网友评论0