边框绘制效果

下载代码

html

css

分享到微信朋友圈

html

css

html, body {
    margin: 0;
    height: 100%;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.effects {
    display: none;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.demo {
    --bg: #113;
    --link-color: #08F;
    --link-hover-color: #3AE;

align-items: center;
    background-color: var(--bg);
    display: flex;
    justify-content: center;
    flex: 0 0 50%;
}

.svg-border {
    left: 0;
    pointer-events: none;
    position: absolute;
    stroke-dashoffset: 101;
    stroke-dasharray: 101 101;
    stroke-width: 4px;
    top: 0;
    transition: all .5s, stroke .3s;
}

.nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-item {
    color: var(--link-color);
    font-weight: bold;
    margin: 0 1rem;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s;
}
.nav-item:hover,
.nav-item.is-active {
    color: var(--link-hover-color);
}
.nav-item:hover .svg-border,
.nav-item.is-active .svg-border {
    stroke-dashoffset: 202;
}

/* demo 1 customizations */

.demo.as-demo1 .nav-item > .svg-border:first-child {
    filter: blur(4px);
    stroke-width: 5px;
}

/* demo 2 customizations */

.demo.as-demo2 {
    --bg: #300;
    --link-color: #C60;
    --link-hover-color: #FC3;
}

.demo.as-demo2 .nav-item > .svg-border {
    filter: url(#displacementFilter);
    margin-left: -3px;
    margin-top: -2px;
    stroke-width: 3px;
}
.demo.as-demo2 .nav-item > .svg-border:first-child {
    filter: url(#displacementFilter2);
    margin-left: -2px;
    margin-top: -1px;
    stroke: #A40;
}

JavaScript

let svgBorderInstance = 0;

Vue.component('SvgBorder', {
    data() {
        svgBorderInstance++;
        return {
            rect: {},
            clipPathId: `svg-border-cp-${svgBorderInstance}`,
        };
    },
    template: `
    <svg 
        class="svg-border" 
        :viewBox="viewBox" 
        :width="width"
        :height="height"
        xmlns="http://www.w3.org/2000/svg"
        stroke="currentColor"
        stroke-width="2">
        <clipPath :id="clipPathId">
            <path :d="path" />
        </clipPath>
        <path 
            :clip-path="'url(#' + clipPathId + ')'" 
            :d="path" 
            fill="none"
            pathLength="100" />
    </svg>
    `,
    methods: {
        getRect() {
            this.rect = (this.$el && this.$el.parentNode && this.$el.parentNode.getBoundingClientRect()) || {};
        },
    },
    computed: {
        width() {
            const { width = 0 } = this.rect;
            return Math.round(width);
        },
        height() {
            const { height = 0 } = this.rect;
            return Math.round(height);
        },
        viewBox() {
            return `0 0 ${this.width} ${this.height}`;
        },
        path() {
            const { width: w, height: h } = this;

return [
                `M ${w/2} ${h}`,
                `h ${(w-h)/2}`,
                `a ${h/2} ${h/2} 0 1 0 0 ${h*-1}`,
                `h ${(w-h)*-1}`,
                `a ${h/2} ${h/2} 0 1 0 0 ${h}`,
                `h ${(w-h)/2}`,
            ].join(' ');
        },
    },
    mounted() {
        this.$nextTick(this.getRect.bind(this));

['load', 'DOMContentLoaded', 'resize', 'orientationchange']
            .map(evName => (window.addEventListener(evName, debounce(this.getRect.bind(this), 1000))));
    }
});

Vue.component('Navigation', {
    data() {
        return { active: null };
    },
    props: {
        links: Array,
    },
    template: `
    <nav class="nav">
        <a
            v-for="({url, label}, index) in links" 
            :href="url" class="nav-item" :class="{'is-active': active === index}"
            @click.prevent="active = index">
            <SvgBorder></SvgBorder>
            <SvgBorder></SvgBorder>
            {{label}}
        </a>
    </nav>
    `,
    mounted() {
        setTimeout(() => (this.active = 0), 1000);
    },
});

const app = new Vue({
    el: '#app',
    data() {
        return {
            navLinks: ['Home', 'Profile', 'Something a bit longer', 'Contact']
                .map(label => ({url: '#', label})),
        }
    },
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg