css实现螺旋三维字母文字排列旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现螺旋三维字母文字排列旋转动画效果代码
代码标签: css 螺旋 三维 字母 文字 排列 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html{ height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; background: #040509; overflow: hidden; font-size: 62.5% } /* The @property CSS at-rule is part of the CSS Houdini umbrella of APIs. It */ @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } .spiral{ display: flex; align-items: center; gap: 10px; position: absolute; color: #e0ecef; font-family: "sans-serif"; } @keyframes spiral{ 0%{ --angle: 0deg; } 100%{ --angle: 360deg; } } .character{ font-size: 2.8rem; color: white; text-transform: uppercase; transform: translateY(calc(sin(var(--angle)) * 100px)) scale(calc(cos(var(--angle)) * 0.5 + 0.5)); animation: spiral 4s linear infinite; } @media (max-width: 490px){ .character{ font-size: 2.2rem } } </style> </head> <body> <div id="spiral" class="spiral"></div> <div id="spiral2" class="spiral"></div> <script id="rendered-js" > let isFirefox = typeof InstallTrigger !== 'undefined'; const words = "lucasfernando.........完整代码请登录后点击上方下载按钮下载查看
网友评论0