svg按钮渐变边框

共用css

css 复制代码
body {
    padding: 50px;
    background-color: black;
    color: white;
}

svg {
    --text_fill: orange;
    --svg_width: 120px;
    --svg_height: 40px;
    width: var(--svg_width);
    height: var(--svg_height);
    cursor: pointer;
    /* 创建图层 */
    will-change: transform;

    &:hover {
        --text_fill: #fed71a;
    }

    text {
        fill: var(--text_fill);
        font-size: 1rem;
        transform: translate(50%, 50%);
        text-anchor: middle;
        dominant-baseline: middle;
        stroke: yellowgreen;
        stroke-width: .5px;
        cursor: pointer;
    }

    rect {
        --stroke_width: 4px;
        width: calc(var(--svg_width) - var(--stroke_width));
        height: calc(var(--svg_height) - var(--stroke_width));
        stroke-width: var(--stroke_width);
        rx: calc(var(--svg_height)/2);
        x: calc(var(--stroke_width)/2);
        y: calc(var(--stroke_width)/2);
        fill: none;
        cursor: pointer;
    }
}

移入执行、移出暂停

html 复制代码
<body>
    <svg style='position:absolute;left:-9999px;width:0;height:0;visibility:hidden;'>
        <defs>
            <linearGradient id='strokeColor1' x1='0%' y1='0%' x2='100%' y2='0%'>
                <stop offset='0%' stop-color="#00ccff" stop-opacity="1" />
                <stop offset='50%' stop-color="#d400d4" stop-opacity="1" />
                <stop offset='100%' stop-color="#ff00ff" stop-opacity=".7" />
            </linearGradient>
        </defs>
    </svg>

    <svg id="svg1">
        <text>渐变按钮</text>
        <rect stroke='url(#strokeColor1)' />
        <animateTransform id="ani1" href="#strokeColor1" attributeName='gradientTransform' dur='5s' type="rotate"
            form="0,.5,.5" to="360,.5,.5" repeatCount='indefinite' begin="indefinite" />
    </svg>
</body> 
<script>
    svg1.addEventListener('mouseover', function () {
        if (!this.beginMark) {
            ani1.beginElement();
            this.beginMark = true;
            return;
        }
        this.unpauseAnimations();
    })

    svg1.addEventListener('mouseleave', function () {
        this.pauseAnimations();
    })
</script>

svg1效果图

移入暂停、移出执行

html 复制代码
<body>
    <svg style='position:absolute;left:-9999px;width:0;height:0;visibility:hidden;'>
        <defs>
            <linearGradient id='strokeColor2' x1='0%' y1='0%' x2='100%' y2='0%'>
                <stop offset='0%' stop-color="#ec261b" />
                <stop offset='50%' stop-color="#ff9f43" />
                <stop offset='100%' stop-color="#ffe66d" stop-opacity="1" />
            </linearGradient>
        </defs>
    </svg>

    <svg id="svg2">
        <text>渐变按钮</text>
        <rect stroke='url(#strokeColor2)' />
        <animateTransform id="ani2" href="#strokeColor2" attributeName='gradientTransform' dur='5s' type="rotate"
            form="0,.5,.5" to="360,.5,.5" repeatCount='indefinite' begin="0s" />
    </svg>
</body>

<script>
    svg2.addEventListener('mouseover', function () {
        this.pauseAnimations();
    })
    svg2.addEventListener('mouseleave', function () {
        this.unpauseAnimations();
    })
</script>

sv2效果图

总结

个人感觉svg实现渐变边框相比较css的实现来说,相对代码量更大一些,但是svg其实还有很多好玩的地方。 用svg来做渐变边框也是另外的一种思路,也许以后能够用的上。

相关推荐
小桥风满袖1 小时前
Three.js-硬要自学系列16 (贝塞尔曲线应用、组合曲线、路径管道、旋转成型、轮廓填充)
前端·css·three.js
换日线°2 小时前
CSS简单实用的加载动画、骨架屏有效果图
css·微信小程序
爱泡脚的鸡腿2 小时前
HTML CSS第七次笔记
前端·css
前端大白话2 小时前
震惊!10行CSS代码就能实现超酷炫的响应式标签云?权重动态变色不是梦!
前端·css·设计
前端大白话2 小时前
惊!90%前端竟不知如何用CSS给`<q>`标签添加超绝引号?3步实现文本引用华丽变身
前端·css·html
墨渊君3 小时前
还原 Mac Dock 栏动效: 一步步打造流畅的波形缩放动画
前端·css·react.js
*TQK*3 小时前
CSS学习笔记8——表格
css·笔记·学习·html
XboxYan4 小时前
CSS grid 布局如何添加分隔线?
前端·css
前端极客探险家4 小时前
CSS 入门全解析
前端·css
我爱吃朱肉16 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3