基于 CSS 动画的 SVG 按钮

栏目: CSS · 发布时间: 7年前

基于 CSS 动画的 SVG 按钮

<a href="#">
    <svg>
        <rect></rect>
    </svg>Button
</a>
body {
    margin: 0;
    padding: 0;
    background: #000;
}

a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 4px;
    color: #fff;
    text-decoration: none;
}

a svg,
a svg rect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: transparent;
}

a {
    svg rect {
        stroke: #00e2ff;
        stroke-width: 4;
        transition: 2s;
        stroke-dasharray: 60 200;
        stroke-dashoffset: 320;
    }

    &:hover {
        svg rect {
            stroke: #ff0;
            stroke-dasharray: 200 60;
            stroke-dashoffset: 0;
        }
    }
}

以上所述就是小编给大家介绍的《基于 CSS 动画的 SVG 按钮》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷产品:36讲直通世界级产品经理

硅谷产品:36讲直通世界级产品经理

曲晓音 / 电子工业出版社 / 2018-10 / 59

《硅谷产品:36讲直通世界级产品经理》是Facebook资深产品经理曲晓音撰写的产品实战教程,立足于作者在Facebook、Instagram、Microsoft、Atlassian等硅谷科技公司的工作经验,分享硅谷先进的产品思维和方法论,用实际案例带领读者了解硅谷产品经理的所想所做。 《硅谷产品:36讲直通世界级产品经理》适合产品经理从业者、想要提升产品理解能力的技术运营人员、刚刚入行或者......一起来看看 《硅谷产品:36讲直通世界级产品经理》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器