svg温度滑动波纹动画效果代码
代码语言：html
所属分类：动画
代码描述：svg温度滑动波纹动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #FCEFD6;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
.label{
fill:#FFFCF9;
font-size:1.8em;
font-family: "din-condensed-web", sans-serif;
/* font-family: "filson-soft", sans-serif; */
text-anchor:middle;
letter-spacing:1.2px;
}
.tubeLabel{
fill:#FCEFD6;
font-size:1.4em;
font-family: "din-condensed-web", sans-serif;
/* font-family: "filson-soft", sans-serif; */
text-anchor:middle;
}
.dragger{
-webkit-tap-highlight-color:transparent;
}
</style>
</head>
<body translate="no" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
<defs>
<linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FF0909"/>
<stop offset="0.2" stop-color="#F3481A"/>
<stop offset="0.5" stop-color="#FABA2C"/>
<stop offset="1" stop-color="#00BCF2"/>
</linearGradient>
<rect id="tube" x="357" y="150" width="86" height="400" rx="43" ry="43"/>
<clipPath id="liquidMask">
<use xlink:href="#tube" class="liquidMask" />
</clipPath>
<clipPath id="tubeMask">
<use xlink:href="#tube" class="liquidMask" />
</clipPath>
<path id="liquid" d="M757,552v490H357V552c50,0,50,20,100,20s50-20,100-20,50,20,100,20S707,552,757,552Z" />
<mask id="gradMask">
<use xlink:href="#liquid" class="liquid" x="0" fill="#FCEFD6" />
<use xlink:href="#liquid" class="liquid" x="0" fill="#EEE" opacity="0.7"/>
</mask>
</defs>
<g class="whole" transform="translate(0, -40)">
<use xlink:href="#tube" class="tubeBg" fill="#C8D9D3" opacity="0.61"/>
<g class="dragger" transform="translate(-6, 0)">
<circle cx="294" cy="540" r="36" fill="#3A3335"/>
<path class="dragTip" d="M315.5,556.76,299.24,540.5l16.26-16.26,36.26,16.26Z" fill="#3A3335"/>
<text class="label" x="294" y="551">100</text>
<!-- <path id="dragShine" d="M330,540c-26,2-18-44-72,0a36,36,0,0,1,72,0Z" fill="#E9E9E9" opacity="0.052"/> -->
</g>
<g mask="url(#gradMask)">
<use xlink:href="#tube" fill="url(#liquidGrad)" />
</g>
<line class="tubeShine" x1="371" y1="200" x2="371" y2="443" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" opacity="0.21" stroke-dasharray="153 30" stroke-dashoffset="-20"/>
<!-- <text class="tubeLabel" x="400" y="180">100°</text>
<text class="tubeLabel" x="400" y="356">50°</text>
<text class="tubeLabel" x="400" y="540">0°</text> -->
<g class="measurements" fill="none" stroke="#FCEFD6" stroke-width="3" stroke-linecap=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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