在制作动画的同时如何使按钮具有圆角？
[英]How do I make the button have rounded corners while still doing the animation?
问题描述
I got this code from code pen but I am looking make sure the button ALWAYS has rounded corners. 
我从笔上得到了这段代码，但是我要确保按钮始终带有圆角。 I do not want sharp corners. 我不要尖角。 I need to have rounded corners both before and on hover. 在悬停之前和悬停时，我都需要弄圆角。
How can I do this? 我怎样才能做到这一点？ I am not sure how i can change it because when i added rounded corners then for some reason it left a weird outline still. 我不确定如何更改它，因为当我添加圆角时，由于某种原因，它仍然留下怪异的轮廓。
<!DOCTYPE.html> <html> <head> <meta charset="UTF-8"> <style> body { text-align: center; background: black; } a { color: #000; text-decoration: none; text-transform: uppercase; font-family: Helvetica; } a, span { font-size: 20px; } svg { width: 230px; height: 40px; } /* THE ROUND PSEUDO-ELEMENT HOVER STYLES */ .round, .svg, .highlight { max-width: 960px; margin: 0 auto; } /* THE SVG HOVER EFFECTS */ .svg .button { text-decoration: none; color: #fff; position: relative; display: inline-block; width: 230px; height: 40px; margin: 20px; overflow: hidden; } .svg .button:nth-child(3) { overflow: visible; position: relative; top: -20px; } .svg .button rect { position: absolute; top: 0; left: 0; stroke-width: 4px; stroke-dashoffset: 400px; stroke: olivedrab; } .svg .button span { color: olivedrab; width: 230px; height: 40px; display: inline-block; text-align: center; position: absolute; left: 0; top: 0; line-height: 40px; transition: all .2s linear; border-radius: 50px; } .svg .button span:hover { color: #fff; background: olivedrab; transition: all 1s cubic-bezier(1.25s 0, 1.15, 1, 1); transition-delay: .5s; } .svg .button:nth-child(1):hover rect { animation: draw1 .75s linear forwards; } @keyframes draw1 { 0% { stroke-dasharray: 300; stroke-dashoffset: 700; stroke-width: 4px; } 75% { stroke-dasharray: 900; stroke-width: 1px; } 100% { stroke-dasharray: 900; stroke-width: 1px; } } </style> </head> <body> <div class="svg"> <a class="button" href="#"> <svg> <rect height="40" width="230" fill="transparent" /> </svg> <span>Button1</span> </a> </div> </body> </html>
1 个解决方案
解决方案1
0 2017-03-27 05:17:35
<rect height="40" width="230" rx="20" ry="20" fill="transparent" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在悬停上做圆角？ - how do I make rounded corners on hovers?
如何在带有w / dojo的矢量矩形上制作圆角？ - How do you make rounded corners on a vector rectangle w/dojo?
如何在 CSS 中为复杂形状添加圆角 - How do I add rounded corners to complex shapes in CSS
如何使用dynamic.js在多边形上制作圆角 - how to make rounded corners on polygon with kineticjs
如何使每个按钮在其旁边显示其各自的文本，当悬停并仍然应用类型 animation - how to make every button have its respective text appear next to it, when hovered and still apply the type animation
如何使JQuery插件“圆角”起作用？ （或建议一个更好的选择） - How can I make the JQuery addon “Rounded Corners” work? (or suggest a better option)
我正在做一个打字稿项目，我试图让我的编辑按钮“编辑”我选择的行。 但我不知道该怎么做 - I am doing a typescript project and I am trying to make my edit button to “edit” the row that I have selected. But I have no idea on how to do it
将鼠标悬停在圆角按钮的角上 - hover on corner of rounded corners button
如何给图像提供两个圆角？ - How can I give an image two rounded corners?
如何绘制带有圆角的圆弧？ - How to draw an arc with rounded corners?
相关标签