TweenMax+svg实现图片文字轮换广告条效果代码
代码语言：html
所属分类：幻灯片
代码描述：TweenMax+svg实现图片文字轮换广告条效果代码
代码标签： TweenMax svg 图片 文字 轮换 广告条
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,500'>
<style>
body {
padding-top: 300px;
padding-left: 100px;
background: #eff;
background: linear-gradient(to left, #eee, #ddefef);
}
svg {
background: #fff;
width: 100%;
max-width: 728px;
height: auto;
}
.txt_1, .txt_2, #ad_cta, #logo, #txtIntro, #txtAlt {
opacity: 0;
}
.txt {
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 32px;
}
.txt_b {
font-weight: 500;
}
.txt_3 {
opacity: 1;
font-size: 20px;
}
</style>
</head>
<body>
<svg id="ad_01" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="728px" height="90px" viewBox="0 0 728 90" enable-background="new 0 0 728 90" xml:space="preserve">
<defs>
<clipPath id="clp_1">
<polygon points="0,0 235,0 180,90 0,90" />
</clipPath>
<clipPath id="clp_2">
<polygon points="235,0 540,0 485,90 180,90" />
</clipPath>
<clipPath id="clp_3">
<polygon points="540,0 728,0 728,90 485,90" />
</clipPath>
<clipPath id="clp_4">
<polygon points="0,0 235,0 180,90 0,90" />
</clipPath>
<clipPath id="grclp_1">
<polygon points="0,0 783,0 728,90 -55,90" />
</clipPath>
<clipPath id="grclp_2">
<polygon points="0,0 0,0 -55,90 -55,90" />
</clipPath>
<clipPath id="logo_clp">
<polygon points="364,0 364,0 364,90 364,90" />
</clipPath>
</defs>
<g id="ad_cta">
<rect fill="#5e5f61" x="20" y="15" width="330" height="60"/>
<text class="txt txt_3" fill="#fff" x="35" y="53">ORDER A FREE SAMPLE <tspan class="txt_b">NOW</tspan></text>
<path fill="#fff" d="M0.28,21.22a0.93,0.93,0,0,0,.66.28,0.92,0.92,0,0,0,.66-0.28l9.81-9.81a0.94,0.94,0,0,0,0-1.33L1.6,0.27A0.94,0.94,0,0,0,.28,1.6l9.15,9.15L0.28,19.89A0.94,0.94,0,0,0,.28,21.22Z" transform="translate(325, 35)"/>
</g>
<g id="logo">
<path id="logo_1" fill="#5e5f61" d="m410.6,48.5l20.6,20.6l20.6,-20.6"/>
<path id="logo_2" fill="#5e5f61" d="m430.1,25.9l-9.3,9.3l11.2,11.3l18.7,0"/>
<path id="logo_3" fill="#5e5f61" d="m408.1,25.9l-20.6,20.6l41.1,0"/>
<g id="logo_text" clip-path="url(#logo_clp)">
<path fill="#5e5f61" d="m462.2,45.5c0,-4.5 2.6,-7 7.1,-7c3,0 5.5,1.1 6.6,3.7l1.7,-0.8c-1.4,-3.2 -4.9,-4.6 -8.3,-4.6c-5.4,0 -9.1,2.9 -9.1,8.4c0,4.6 2.9,8.3 9.1,8.3c3.9,0 6.8,-1.3 8.5,-4.6l-1.7,-0.8c-1.3,2.4 -3.5,3.7 -6.7,3.7c-4.7,0 -7.2,-2.7 -7.2,-6.3"/>
<path fill="#5e5f61" d="m499.1,46.1c1.9,-0.1 5,-1.1 5,-4.4c0,-3.9 -3.7,-4.5 -6.3,-4.5l-9.2,0l0,15.9l1.9,0l0,-7.1l6.3,0l5.1,7.1l2.4,0l-5.2,-7zm-8.5,-1.7l0,-5.5l6.8,0c2.8,0 4.9,0.4 4.9,2.7c0,2.3 -2.1,2.7 -4.9,2.7l-6.8,0l0,0.1z"/>
<path fill="#5e5f61" d="m524.2,36.8c-5.4,0 -9.3,3.2 -9.3,8.5c0,5.7 4.7,8.3 9.3,8.3c4.6,0 9.3,-2.6 9.3,-8.3c0,-5.3 -3.9,-8.5 -9.3,-8.5m0,15c-3.9,0 -7.4,-2.1 -7.4,-6.9c0,-3.6 2.7,-6.5 7.4,-6.5c4.6,0 7.4,2.9 7.4,6.5c0,4.9 -3.5,6.9 -7.4,6.9"/>
<path fill="#5e5f61" d="m545.7,41.3c0,-2 2.3,-2.8 5.5,-2.8c4.3,0 5.9,2 6.5,2.8l1.4,-1.1c-1.1,-1.5 -3.7,-3.3 -7.9,-3.3c-4.3,0 -7.5,1.4 -7.5,4.8c0,6.5 13.9,2.2 13.9,7.1c0,2.5 -3.4,3.2 -5.8,3.2c-4.8,0 -6.3,-2 -7.2,-3.2l-1.5,1.3c1.4,1.5 3.3,3.7 8.5,3.7c5.4,0 8,-2.2 8,-4.9c0,-7.4 -13.9,-2.8 -13.9,-7.6"/>
<path fill="#5e5f61" d="m571.8,41.3c0,-2 2.3,-2.8 5.5,-2.8c4.3,0 5.9,2 6.5,2.8l1.4,-1.1c-1.1,-1.5 -3.7,-3.3 -7.9,-3.3c-4.3,0 -7.5,1.4 -7.5,4.8c0,6.5 13.9,2.2 13.9,7.1c0,2.5 -3.4,3.2 -5.8,3.2c-4.8,0 -6.3,-2 -7.2,-3.2l-1.5,1.3c1.4,1.5 3.3,3.7 8.5,3.7c5.4,0 8,-2.2 8,-4.9c0,-7.4 -13.9,-2.8 -13.9,-7.6"/>
<path fill="#5e5f61" d="m604.6,53.2l8.2,-16l-2.1,0l-7.1,13.9l-7,-13.9l-2.2,0l8.3,16"/>
<path fill="#5e5f61" d="m622.600037,37.200001l1.9,0l0,15.900001l-1.9,0l0,-15.900001z"/>
<path fill="#5e5f61" d="m639.2,53.2l14.5,0l0,-1.8l-12.6,0l0,-14.2l-1.9,0"/>
<path fill="#5e5f61" d="m664.1,53.2l14.5,0l0,-1.8l-12.6,0l0,-14.2l-1.9,0"/>
<path fill="#5e5f61" d="m685.4,53.2l14.5,0l0,-1.8l-12.5,0l0,-5.7l10.2,0l0,-1.7l-10.2,0l0,-5.1l12.2,0l0,-1.7l-14.2,0"/>
<path fill="#5e5f61" d="m707.1,52c-1.5,0 -2.9,1.2 -2.9,2.8c0,1.6 1.3,2.8 2.9,2.8c1.5,0 2.8,-1.2 2.8,-2.8c0,-1.6 -1.3,-2.8 -2.8,-2.8m0,5.2c-1.3,0 -2.3,-1 -2.3,-2.4c0,-1.3 1,-2.3 2.3,-2.3c1.3,0 2.3,1 2.3,2.3c-0.1,1.4 -1.1,2.4 -2.3,2.4"/>
<path fill="#5e5f61&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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