SVG属性动画

最新推荐文章于 2023-10-20 09:17:24 发布

一只敲码的猫~

最新推荐文章于 2023-10-20 09:17:24 发布

阅读量80

点赞数

分类专栏： es6 vue css 文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_38946996/article/details/127987836

版权

vue 同时被 3 个专栏收录

105 篇文章 2 订阅

订阅专栏

es6

78 篇文章 2 订阅

订阅专栏

css

17 篇文章 0 订阅

订阅专栏

<template>
    <div class="title">SVG属性动画</div>
    <svg viewBox="0 0 100 100" class="SVG">
        <polygon class="item"
            points="50,5.5 64.4,34.8 96.7,39.5 73.4,62.3 78.9,94.5 50,79.3 21.1,94.5 26.6,62.3 3.3,39.5 35.6,34.8 " />
    </svg>

    <svg viewBox="0 0 100 100" class="SVG">
        <polygon class="item2"
            points="50,5.5 64.4,34.8 96.7,39.5 73.4,62.3 78.9,94.5 50,79.3 21.1,94.5 26.6,62.3 3.3,39.5 35.6,34.8 " />
    </svg>
    <br><br>
</template>
<script setup>

</script>
<style lang="less" scoped>
.title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #999;
}

.SVG {
    height: 100px;
}

.item {
    fill: none;
    stroke: #F60;
    stroke-width: 4;
    stroke-dasharray: 10, 10;
    animation: dash linear infinite 1s;
}

@keyframes dash {
    to {
        stroke-dashoffset: 20;
    }
}

.item2 {
    fill: none;
    stroke: #F60;
    stroke-width: 4;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: dash2 linear infinite 10s;
}

@keyframes dash2 {
    to {
        stroke-dashoffset: -340;
    }
}
</style>