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" d="m708.4,54.1c0,-0.6 -0.4,-0.9 -1.1,-0.9l-1.3,0l0,3.2l0.5,0l0,-1.4l0.6,0l0.9,1.4l0.5,0l-0.9,-1.4c0.4,0 0.8,-0.3 0.8,-0.9m-1.9,0.5l0,-1l0.7,0c0.3,0 0.7,0.1 0.7,0.5c0,0.5 -0.4,0.5 -0.8,0.5l-0.6,0z"/>
</g>
</g>
<g clip-path="url(#grclp_2)">
<image clip-path="url(#clp_4)" width="238" height="90" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAyAAD/4QODaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzBmZDNkYmMtMzRiYi00ZjU5LWFjYTYtM2RkNTM0MDdlNzA2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlGRTMzMDNFODk2MDExRTZBNjQwOUYzMUYzQkZBQkREIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlGRTMzMDNEODk2MDExRTZBNjQwOUYzMUYzQkZBQkREIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1LjUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MTU3Zjk0MS0zMGE4LTRlNjgtODBiMC05ZjU2NjgxNTM5NmEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6YzBmZDNkYmMtMzRiYi00ZjU5LWFjYTYtM2RkNTM0MDdlNzA2Ii8+IDwvcmRmOkRlc2NyaXB0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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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