svg+css实现弯曲的缆线效果代码
代码语言：html
所属分类：布局界面
代码描述：svg+css实现弯曲的缆线效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
}
svg {
width: 100%;
height: 100%;
}
.c0 { fill: #fff3eb }
.c1 { fill: #ffe6d5 }
.c2 { fill: #ffccaa }
.c3 { fill: #ffb380 }
.c4 { fill: #ff9955 }
.c5 { fill: #ff7f2a }
.c6 { fill: #ff6600 }
.f15 { filter: url(#f15) }
.f10 { filter: url(#f10) }
</style>
</head>
<body translate="no">
<svg version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f15" style="color-interpolation-filters:sRGB">
<feGaussianBlur stdDeviation="15"/>
<feDiffuseLighting result="result1" surfaceScale="20">
<feDistantLight azimuth="160" elevation="90"/>
</feDiffuseLighting>
<feComposite in2="SourceGraphic" k1="0.4" k3="1" k4="-0.4" operator="arithmetic"/>
</filter>
<filter id="f10" style="color-interpolation-filters:sRGB">
<feGaussianBlur stdDeviation="10"/>
<feDiffuseLighting result="result1" surfaceScale="13">
<feDistantLight azimuth="160" elevation="90"/>
</feDiffuseLighting>
<feComposite in2="SourceGraphic" k1="0.4" k3="1" k4="-0.4" operator="arithmetic"/>
</filter>
<filter id="erode" style="color-interpolation-filters:sRGB">
<feMorphology radius="5"/>
</filter>
<g id="dode">
<path d="m90 0-3.0667 23.294-8.991 21.706-14.303 18.64-18.64 14.303-21.706 8.991-23.294 3.0667-23.294-3.0667-21.706-8.991-18.64-14.303-14.303-18.64-8.991-21.706-3.0667-23.294 3.0667-23.294 8.991-21.706 14.303-18.64 18.64-14.303 21.706-8.991 23.294-3.0667 23.294 3.0667 21.706 8.991 18.64 14.303 14.303 18.64 8.991 21.706z" style="fill:none;stroke:#0000ff"/>
<path d="m14.59-56.516a15 15 0 01-14.23 11.512 15 15 0 01-14.766-10.817" style="fill:none;stroke:#ff0000"/>
<path d="m-14.466 56.035a15 15 0 0114.048-11.029 15 15 0 0114.641 10.229" style="fill:none;stroke:#800000"/>
</g>
<g id="clips">
<path id="bottom-out" d="m369.5 1049.6a539 540 0 00269.5-467.65 186 210 0 00-186-210v-72h257v750z" style="fill:none;stroke:#ff0000"/>
<path id="lower-out" d="m710 300h-460v174h79a124 102 0 01124-102 186 210 0 01186 210h71z" style="fill:none;stroke:#ff0000"/>
<path id="left-out" d="m250 650v-350h260v72h-57a124 102 0 00-124 102 115 95 0 00115 95v81z" style="fill:none;stroke:#ff0000"/>
<path id="higher-out" d="m710 650h-460v-176h79a115 95 0 00115 95 180 189 0 00180-189h86z" style="fill:none;stroke:#ff0000"/>
<path id="top-out" d="m710 650h-266v-81a180 189 0 00180-189 470 540 0 00-235-467.65h321z" style="fill:none;stroke:#ff0000"/>
<path id="bottom-in" d="m369.5 1049.6a539 540 0 00269.5-467.65 186 210 0 00-186-210l-9 278-144 400z" style="fill:none;stroke:#ff0000"/>
<path id="lower-in" d="m639 582a186 210 0 00-186-210 124 102 0 00-124 102h111v108z" style="fill:none;stroke:#ff0000"/>
<path id="left-in" d="m453 372a124 102 0 00-124 102 115 95 0 00115 95z" style="fill:none;stroke:#ff0000"/>
<path id="higher-in" d="m329 474a115 95 0 00115 95 180 189 0 00180-189h-244v94z" style="fill:none;stroke:#ff0000"/>
<path id="top-in" d="m320-90 69.001 2.3469a470 540 0 01235 467.65 180 189 0 01-180 189v-95h66v-174l-66-160z" style="fill:none;stroke:#ff0000"/>
<clipPath id="cp-out-b">
<use href="#bottom-out"/>
</clipPath>
<clipPath id="cp-out-bl">
<use href="#bottom-out"/>
<use href="#lower-out"/>
</clipPath>
<clipPath id="cp-out-ll">
<use href="#lower-out"/>
<use href="#left-out"/>
</clipPath>
<clipPath id="cp-out-lh">
<use href="#left-out"/>
<use href="#higher-out"/>
</clipPath>
<clipPath id="cp-out-ht">
<use href="#higher-out"/>
<use href="#top-out"/>
</clipPath>
<clipPath id="cp-out-t">
<use href="#top-out"/>
</clipPath>
<clipPath id="cp-in-b">
<use href="#bottom-in"/>
</clipPath>
<clipPath id="cp-in-bl">
<use href="#bottom-in"/>
<use href="#lower-in"/>
</clipPath>
<clipPath id="cp-in-ll">
<use href="#lower-in"/>
<use href="#left-in"/>
</clipPath>
<clipPath id="cp-in-lh">
<use href="#left-in"/>
<use href="#higher-in"/>
</clipPath>
<clipPath id="cp-in-ht">
<use href="#top-in"/>
<use href="#higher-in"/>
</clipPath>
<clipPath id="cp-in-t">
<use href="#top-in"/>
<use href="#higher-in"/>
</clipPath>
</g>
<g id="lines">
<path id="l1" class="c1 f15" d="m575.29 4.2729c-10.937-20.307-23.684-39.71-38.24-57.757-13.964-17.308-29.633-33.258-46.755-47.514-17.916-14.76-37.163-25.274-53.965-36.619l-16.726 24.904c18.505 12.367 37.02 22.135 51.887 34.469 15.703 12.871 30.132 27.34 43.029 43.076 13.496 16.462 25.4 34.301 35.702 53.068z"/>
<pat.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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