TweenMax+svg实现酷炫svg文字logo入场出场动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现酷炫svg文字logo入场出场动画效果代码
代码标签： TweenMax svg 文字 logo 入场 出场 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color:#971416;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
position:absolute;
width:100%;
height:100%;
visibility:hidden;
transform:translate(-50%, 0%);
}
/* svg{
width:800px;
height:600px;
} */
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
<defs>
<clipPath id="outlineMask">
<rect class="outlineMask" x="160" y="50" width="480" height="347" fill="#2c292b" opacity="0.2"/>
</clipPath>
<clipPath id="svgMask">
<path d="M236.1,377c-24,0-48.3-8.4-67.4-25.4l20.6-24.7c14.3,11.8,29.3,19.3,47.4,19.3c14.3,0,22.9-5.7,22.9-15v-0.5
c0-8.8-5.4-13.4-32-20.2c-32-8.2-52.6-17-52.6-48.5v-0.5c0-28.8,23.1-47.9,55.6-47.9c23.1,0,42.9,7.3,59,20.2l-18.1,26.3
c-14.1-9.8-27.9-15.7-41.3-15.7s-20.4,6.1-20.4,13.8v0.5c0,10.4,6.8,13.8,34.3,20.9c32.2,8.4,50.4,20,50.4,47.6v0.5
C294.4,359.3,270.3,377,236.1,377z"/>
<path d="M399.4,373.9h-30.8l-64.2-155.9h38.6l41.5,109.8l41.5-109.8h37.7L399.4,373.9z"/>
<path d="M554.3,377.4c-49.5,0-83.5-34.7-83.5-81.7v-0.5c0-45.1,35.2-82.1,83.2-82.1c28.6,0,45.8,7.7,62.4,21.8l-22,26.5
c-12.2-10.2-23.1-16.1-41.5-16.1c-25.4,0-45.6,22.5-45.6,49.5v0.5c0,29,20,50.4,48.1,50.4c12.7,0,24-3.2,32.9-9.5v-22.7h-35.2
v-30.2h69v69C605.8,366.1,583.4,377.4,554.3,377.4z"/>
</clipPath>
<radialGradient id="bgGrad" cx="400" cy="300" r="353.55" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#be2a33"/>
<stop offset="1" stop-color="#971416"/>
</radialGradient>
</defs>
<title>svg drop</title>
<rect class="bg" width="800" height="600" fill="url(#bgGrad)"/>
<g class="maskedOutline" clip-path="url(#outlineMask)">
<g class="whole">
<g class="letterS">
<path d="M168.71,351.59l20.64-24.72" fill="none" stroke="#ededed" stroke-width="1"/>
<path d="M294.38,327.77c0,31.53-24,49.22-58.3,49.22a101,101,0,0,1-67.37-25.41" fill="none" stroke="#ededed" stroke-width="1"/>
<path d="M271.47,260.17c-14.06-9.75-27.9-15.65-41.28-15.65s-20.42,6.12-20.42,13.84v.45c0,10.43,6.81,13.84,34.25,20.87,32.21,8.39,50.36,20,50.36,47.64v.45" fill="none" stroke="#ededed" stroke-width="1"/>
<path d="M289.61,233.86l-18.15,26.31" fill="none" stroke="#ededed" stroke-width="1"/>
<path d="M175.06,262v-.45c0-28.81,23.14-47.86,55.58-47.86,23.14,0,42.87,7.26,59,20.19" fill="none" stroke="#ededed" stroke-width="1"/>
<path d="M189.35,326.86c14.29,11.79,29.26,19.28,47.41,19.28,14.29,0,22.91-5.67,22.91-15v-.45c0-8.85-5.44-13.38-32-20.19-32-8.17-52.63-17-52.63-48.54" fill="none" stroke="#ededed" stroke-width="1"/>
<circle cx="175.62" cy="264.67" r="4.5" fill="#ededed"/>
<circle cx="294.11" cy="331.36" r="4.5" fill="#ededed"/>
<circle cx="168.71" cy="351.59" r="4.5" fill="#ededed"/>
<circle cx="189.35" cy="326.86" r="4.5" fill="#ededed"/>
<circle cx="271.47" cy="260.17" r="4.5" fill="#ededed"/>
<circle cx="289.61" cy="233.86" r="4.5" fill="#ededed"/>
</g>
<g class="letterV">
<line x1="399.41" y1="373.86" x2="368.56" y2="373.86" fill="none" stroke="#ededed" stroke-width="1"/>
<line x1="463.6" y1="217.94" x2="399.41" y2="373.86" fill="none" stroke="#ededed" stroke-width="1"/>
<line x1="425.95" y1="217.94" x2="463.6" y2="217.94" fill="none" stroke="#ededed" stroke-width="1"/>
<line x1="384.44" y1="327.77" x2="425.95" y2="217.94" fill="none" stroke="#ededed" stroke-width="1"/>
<line x1="342.92" y1="217.94" x2="384.44" y2="327.77" fill="none" stroke="#ededed" stroke-width="1"/>
<line x1="304.36" y1="217.94" x2="342.92" y2="217.94" fill="none" stroke="#ededed" stroke-width="1"/>
<line x1="368.56" y1="373.86" x2="304.36" y2="217.94" fill="none" stroke="#ededed" stroke-width="1"/>
<circle cx="304.36" cy="217.94" r="4.5" fill="#ededed"/>
<circle cx="342.92" cy="217.94" r="4.5" fill="#ededed"/>
<circle cx="425.95" cy="217.94" r="4.5" fill="#ededed"/>
<circle cx="463.6" cy="217.94" r="4.5" fill="#ededed"/>
<circle cx="399.41" cy="373.86" r="4.5" fill="#ededed"/>
<circle cx="368.56" cy="373.86" r="4.5" fill="#ededed"/>
</g>
<g class="letterG">
<path fill="none" stroke="#ededed" d="M616.5,235l-22,26.5"/>
<path fill="none" stroke="#ededed" d="M470.9,295.3c0-45.1,35.2-82.1,83.2-82.1c28.6,0,45.8,7.7,62.4,21.8"/>
<path fill="none" stroke="#ededed" d="M622.2,352.3c-16.3,13.8-38.8,25.2-67.8,25.2c-49.5,0-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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