css+svg实现无限循环的曲线动画效果代码
代码语言：html
所属分类：动画
代码描述：css+svg实现无限循环的曲线动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
background: black;
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
}
main {
padding: 1.5em 0;
}
.ic {
display: block;
width: 16em;
height: 16em;
}
.ic__loop {
animation: loop 4s linear infinite;
}
.ic__loop:nth-of-type(2) {
animation-delay: -0.0833333333s;
}
.ic__loop:nth-of-type(3) {
animation-delay: -0.1666666667s;
}
.ic__loop:nth-of-type(4) {
animation-delay: -0.25s;
}
.ic__loop:nth-of-type(5) {
animation-delay: -0.3333333333s;
}
.ic__loop:nth-of-type(6) {
animation-delay: -0.4166666667s;
}
.ic__loop:nth-of-type(7) {
animation-delay: -0.5s;
}
.ic__loop:nth-of-type(8) {
animation-delay: -0.5833333333s;
}
.ic__loop:nth-of-type(9) {
animation-delay: -0.6666666667s;
}
.ic__loop:nth-of-type(10) {
animation-delay: -0.75s;
}
.ic__loop:nth-of-type(11) {
animation-delay: -0.8333333333s;
}
.ic__loop:nth-of-type(12) {
animation-delay: -0.9166666667s;
}
.ic__loop:nth-of-type(13) {
animation-delay: -1s;
}
.ic__loop:nth-of-type(14) {
animation-delay: -1.0833333333s;
}
.ic__loop:nth-of-type(15) {
animation-delay: -1.1666666667s;
}
.ic__loop:nth-of-type(16) {
animation-delay: -1.25s;
}
.ic__loop:nth-of-type(17) {
animation-delay: -1.3333333333s;
}
.ic__loop:nth-of-type(18) {
animation-delay: -1.4166666667s;
}
.ic__loop:nth-of-type(19) {
animation-delay: -1.5s;
}
.ic__loop:nth-of-type(20) {
animation-delay: -1.5833333333s;
}
.ic__loop:nth-of-type(21) {
animation-delay: -1.6666666667s;
}
.ic__loop:nth-of-type(22) {
animation-delay: -1.75s;
}
.ic__loop:nth-of-type(23) {
animation-delay: -1.8333333333s;
}
.ic__loop:nth-of-type(24) {
animation-delay: -1.9166666667s;
}
.ic__loop:nth-of-type(25) {
animation-delay: -2s;
}
.ic__loop:nth-of-type(26) {
animation-delay: -2.0833333333s;
}
.ic__loop:nth-of-type(27) {
animation-delay: -2.1666666667s;
}
.ic__loop:nth-of-type(28) {
animation-delay: -2.25s;
}
.ic__loop:nth-of-type(29) {
animation-delay: -2.3333333333s;
}
.ic__loop:nth-of-type(30) {
animation-delay: -2.4166666667s;
}
.ic__loop:nth-of-type(31) {
animation-delay: -2.5s;
}
.ic__loop:nth-of-type(32) {
animation-delay: -2.5833333333s;
}
.ic__loop:nth-of-type(33) {
animation-delay: -2.6666666667s;
}
.ic__loop:nth-of-type(34) {
animation-delay: -2.75s;
}
.ic__loop:nth-of-type(35) {
animation-delay: -2.8333333333s;
}
.ic__loop:nth-of-type(36) {
animation-delay: -2.9166666667s;
}
.ic__loop:nth-of-type(37) {
animation-delay: -3s;
}
.ic__loop:nth-of-type(38) {
animation-delay: -3.0833333333s;
}
.ic__loop:nth-of-type(39) {
animation-delay: -3.1666666667s;
}
.ic__loop:nth-of-type(40) {
animation-delay: -3.25s;
}
.ic__loop:nth-of-type(41) {
animation-delay: -3.3333333333s;
}
.ic__loop:nth-of-type(42) {
animation-delay: -3.4166666667s;
}
.ic__loop:nth-of-type(43) {
animation-delay: -3.5s;
}
.ic__loop:nth-of-type(44) {
animation-delay: -3.5833333333s;
}
.ic__loop:nth-of-type(45) {
animation-delay: -3.6666666667s;
}
.ic__loop:nth-of-type(46) {
animation-delay: -3.75s;
}
.ic__loop:nth-of-type(47) {
animation-delay: -3.8333333333s;
}
.ic__loop:nth-of-type(48) {
animation-delay: -3.9166666667s;
}
/* Animation */
@keyframes loop {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -600;
}
}
</style>
</head>
<body >
<main>
<svg class="ic" viewBox="0 0 256 256" width="256px" height="256px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="loop" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="hsl(53,90%,55%)"></stop>
<stop offset="25%" stop-color="hsl(33,90%,55%)"></stop>
<stop offset="50%" stop-color="hsl(3,90%,55%)"></stop>
<stop offset="75%" stop-color="hsl(303,90%,35%)"></stop>
<stop offset="100%" stop-color="hsl(223,90%,55%)"></stop>
</linearGradient>
</defs>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="0" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,2)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.020833333333333332" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,6)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.041666666666666664" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,10)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.0625" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,14)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.08333333333333333" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,18)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.10416666666666666" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,22)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.125" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,26)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.14583333333333331" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,30)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.16666666666666666" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,34)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.1875" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,38)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.20833333333333331" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,42)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.22916666666666666" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,46)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.25" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,50)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.2708333333333333" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,54)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.29166666666666663" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,58)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.3125" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,62)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.3333333333333333" d="M 48 1 C 24.18 1 1 8.18 1 32 C 1 55.82 24.18 63 48 63 C 80 63 128 32 128 32 C 128 32 176 1 208 1 C 231.761 1 255 8.239 255 32 C 255 55.761 231.761 63 208 63 C 176 63 128 32 128 32 C 128 32 80 1 48 1 Z" transform="translate(0,66)"></path>
<path class="ic__loop" fill="none" stroke="url(#loop)" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="-0.35416666666666663" d="M 48 1 C 24.18 1 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0