css实现一个文字三维扭转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个文字三维扭转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #d52a2a; color: #ebeb47; } ul { overflow: hidden; perspective: 900px; list-style: none; height: 100vh; max-height: 800px; min-height: 400px; text-align: center; } @keyframes width-sway { 0%, 100% { width: 500px; } 50% { width: 100%; } } li { position: absolute; top: 0; width: 100%; transform: translateY(100vh); font-size: 1.5rem; font-family: sans-serif; font-weight: bold; animation: 5.3333333333s spiral-staircase linear infinite; } li:nth-child(1) { animation-delay: 0.3333333333s; } li:nth-child(2) { animation-delay: 0.6666666667s; } li:nth-child(3) { animation-delay: 1s; } li:nth-child(4) { animation-delay: 1.3333333333s; } li:nth-child(5) { animation-delay: 1.6666666667s; } li:nth-child(6) { animation-delay: 2s; } li:nth-child(7) { animation-delay: 2.3333333333s; } li:nth-child(8) { animation-delay: 2.6666666667s; } li:nth-child(9) { animation-delay: 3s; } li:nth-child(10) { animation-delay: 3.3333333333s; } li:nth-child(11) { animation-delay: 3.6666666667s; } li:nth-child(12) { animation-delay: 4s; } li:nth-child(13) { animation-delay: 4.3333333333s; } li:nth-child(14) { animation-delay: 4.6666666667s; } li:nth-child(15) { animation-delay: 5s; } li:nth-child(16) { animation-delay: 5.3333333333s; } li:nth-child(1) { right: 1rem; } li:nth-last-child(1) { right: 1rem; } li:nth-child(2) { right: 2rem; } li:nth-last-child(2) { right: 2rem; } li:nth-child(3) { right: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0