🐛 animate compatible with Firefox
This commit is contained in:
parent
429e5b9478
commit
0d1b1d9c29
|
@ -1,12 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-border-box-1">
|
<div class="dv-border-box-1">
|
||||||
<svg
|
<svg width="150px" height="150px" :key="item" v-for="item in border" :class="`${item} border`">
|
||||||
width="150px"
|
|
||||||
height="150px"
|
|
||||||
:key="item"
|
|
||||||
v-for="item in border"
|
|
||||||
:class="`${item} border`"
|
|
||||||
>
|
|
||||||
<polygon
|
<polygon
|
||||||
fill="#4fd2dd"
|
fill="#4fd2dd"
|
||||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||||
|
@ -14,7 +8,7 @@
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
values="#4fd2dd;#235fa7;#4fd2dd"
|
values="#4fd2dd;#235fa7;#4fd2dd"
|
||||||
dur=".5s"
|
dur="0.5s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
|
@ -26,7 +20,7 @@
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
values="#235fa7;#4fd2dd;#235fa7"
|
values="#235fa7;#4fd2dd;#235fa7"
|
||||||
dur=".5s"
|
dur="0.5s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
|
@ -37,7 +31,7 @@
|
||||||
>
|
>
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
values="#4fd2dd;#235fa7;#transparent"
|
values="#4fd2dd;#235fa7;transparent"
|
||||||
dur="1s"
|
dur="1s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
|
|
|
@ -1,12 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-border-box-1">
|
<div class="dv-border-box-1">
|
||||||
<svg
|
<svg width="150px" height="150px" :key="item" v-for="item in border" :class="`${item} border`">
|
||||||
width="150px"
|
|
||||||
height="150px"
|
|
||||||
:key="item"
|
|
||||||
v-for="item in border"
|
|
||||||
:class="`${item} border`"
|
|
||||||
>
|
|
||||||
<polygon
|
<polygon
|
||||||
fill="#4fd2dd"
|
fill="#4fd2dd"
|
||||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||||
|
@ -14,7 +8,7 @@
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
values="#4fd2dd;#235fa7;#4fd2dd"
|
values="#4fd2dd;#235fa7;#4fd2dd"
|
||||||
dur=".5s"
|
dur="0.5s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
|
@ -26,7 +20,7 @@
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
values="#235fa7;#4fd2dd;#235fa7"
|
values="#235fa7;#4fd2dd;#235fa7"
|
||||||
dur=".5s"
|
dur="0.5s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
|
@ -37,7 +31,7 @@
|
||||||
>
|
>
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
values="#4fd2dd;#235fa7;#transparent"
|
values="#4fd2dd;#235fa7;transparent"
|
||||||
dur="1s"
|
dur="1s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
|
|
Loading…
Reference in New Issue