css实现文字围成圆圈三维翻转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文字围成圆圈三维翻转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; position: relative; background: conic-gradient(from 90deg at 30% -10%, #8c273b, #bc344f); perspective: 800px; } svg { width: 50vmin; aspect-ratio: 1; transform-style: preserve-3d; } svg text { letter-spacing: 1px; text-transform: uppercase; transform-origin: 50% 50%; animation: rotating 30s ease-out infinite; } svg .a { font-size: 5rem; fill: #00b7eb; animation-delay: -0.8s; } svg .b { font-size: 3rem; fill: yellow; animation-direction: reverse; animation-timing-function:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0