纯css实现文字攀爬台阶动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现文字攀爬台阶动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Lemonada:wght@700&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #eee; color: #444; min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .continer { position: relative; min-width: 720px; height: 360px; border: 2px solid #fff; border-radius: 4px; -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 150% -150%; perspective-origin: 150% -150%; overflow: hidden; background-image: linear-gradient(190deg, #def, #9ab 53%, #789 53%, #456); } .step { position: absolute; overflow: hidden; border: solid #aaa; border-width: 1px 0; } .stepA, .stepC, .stepE, .stepG { width: 80px; height: 120px; background-color: #fff; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .stepA::after, .stepC::after, .stepE::after, .stepG::after { color: #4b8; } .stepB, .stepD, .stepF { width: 40px; height: 120px; background-color: #bcd; -webkit-transform: rotateX(90deg) rotateY(90deg); transform: rotateX(90deg) rotateY(90deg); } .stepB::after, .stepD::after, .stepF::after { color: #264; } .step::after { content: 'Climbing up the stairs'; position: absolute; left: 400px; font-family: 'Lemonada', cursive; font-weight: bold; font-size: 60px; -webkit-filter: blur(1px); filter: blur(1px); white-space: nowrap; -webkit-animation: textClimb 12s infinite linear; animation: textClimb 12s infinite linear; } .stepA { width: 320px; top: 200px; left:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0