css+svg实现文字环绕按钮旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现文字环绕按钮旋转动画效果代码,鼠标放上去动画暂停。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Quicksand:wght@300&display=swap'> <style> html, body { height: 100%; } body { background: #A6B8B1; display: grid; place-content: center; grid-gap: 2rem; } .link { width: 10rem; height: 10rem; display: inline-block; font: 300 1.55rem/1.4 "Josefin Sans"; text-transform: uppercase; letter-spacing: 0.1175em; word-spacing: 0.3em; } .link__svg { width: 100%; height: auto; transform-box: fill-box; fill: #2B3338; stroke: #2B3338; stroke-width: 0.05em; stroke-linecap: round; stroke-linejoin: round; } .link__cloud { transform-origin: 50% 50%; -webkit-animation: rotate normal infinite 60s linear; animation: rotate normal infinite 60s linear; fill: rgba(255, 255, 255, 0.15); } .link__face, .link__arrow { transform-origin: 50% 50%; transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0); } .link:hover .link__face, .link:hover .link__arrow { transform: scale(1.1); transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); } .link__arrow { stroke-width: 0.075em; } .link__text { -webkit-animation: rotateReverse normal infinite 20s linear; animation: rotateReverse normal infinite 20s linear; transform-origin: 50% 50%; } .link:hover .link__text { -webkit-animation-play-state: paused; animation-play-state: paused; } .link--alt { font-size: 1.15rem; letter-spacing: 0; word-spacing: 0; } @-webkit-keyframes rotate { to { transform: rotate(360deg); } } @keyframes rotate { to { transform: rotate(360deg); } } @-webkit-keyframes rotateReverse { to { transform: rotate(-360deg); } } @keyframes rotateReverse { to { transform: rotate(-360deg); } } </style> </head> <body > <a href="#" class="link"> <svg viewBox='0 0 200 200' width='200' height='200' xmlns='http://www.w3.org/2000/svg' class="link__svg" aria-labelledby="link1-title link1-desc"> <title id="link1-title">Come quick and click this</title> <desc id="link1-desc">A rotating link with text placed around a circle with an arrow inside</desc> <path id="link-circle" class="link__path" d="M 20, 100 a 80,80 0 1,1 160,0 a 80,80 0 1,1 -160,0" stroke="none" fill="none" /> <path class="link__arrow" d="M 75 100 L 125 100 L 110 85 M 125 100 L 110 115" fill="none" /> <text class="link__text"> <textPath href="#link-circle" stroke="none"> Come quick and click this </textPath> </text> </svg> </a> <a href="#" class="link link--alt"> <svg viewBox='0 0 200 200' width='200' height='200' xmlns='http://www.w3.org/2000/svg' class="link__svg" aria-labelledby="link2-title link2-desc"> <title id="link2-title">You are wonderful, now click this</title> <desc id="link2-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0