HTML5svg自行车运动员描边动画特效.zip资源-CSDN文库

共15个文件

js：5个

css：3个

html：2个

版权申诉

html5

133 浏览量 2022-11-03 23:38:30 上传评论收藏 107KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 svg自行车运动员描边动画特效.zip （15个子文件）

132692071750223406

HTML5_svgmb

css

demo2.css 1KB

base.css 8KB

demo1.css 2KB

img

route.svg 3KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 71KB

demo2.js 12KB

DrawSVGPlugin.min.js 4KB

demo.js 764B

demo1.js 12KB

TweenMax.min.js 112KB

index2.html 73KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 svg 自行车运动描边动画特效</title> <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,700,800" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/demo2.css" /> <script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script> </head> <body class="demo-2"> <svg class="hidden"> <symbol id="icon-arrow" viewBox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/> </symbol> <symbol id="icon-drop" viewBox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/> </symbol> <symbol id="icon-github" viewBox="0 0 32.6 31.8"> <title>github</title> <path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/> </symbol> <symbol id="icon-bike" viewBox="0 0 525.153 525.153"> <title>bike</title> <path d="M350.102,113.761c21.663,0,39.386-17.702,39.386-39.365S371.764,35.01,350.102,35.01 c-21.881,0-39.386,17.746-39.386,39.408S328.22,113.761,350.102,113.761z M415.746,271.329 c-60.393,0-109.407,49.014-109.407,109.407s49.014,109.407,109.407,109.407s109.407-49.014,109.407-109.407 S476.138,271.329,415.746,271.329z M415.746,457.32c-42.231,0-76.585-34.354-76.585-76.585s34.354-76.585,76.585-76.585 s76.585,34.354,76.585,76.585S457.977,457.32,415.746,457.32z M323.844,227.566h91.902V188.18h-70.02l-42.231-71.552 c-6.564-10.941-18.402-18.162-31.947-18.162c-10.284,0-19.474,4.136-26.258,10.941l-80.961,80.939 c-7.002,6.586-11.159,15.995-11.159,26.279c0,13.763,7.221,25.382,18.599,32.187l73.303,44.397v109.407h39.386V260.826 l-49.233-36.542l50.765-50.984L323.844,227.566z M109.407,271.329C49.014,271.329,0,320.343,0,380.736 s49.014,109.407,109.407,109.407s109.407-49.014,109.407-109.407S169.799,271.329,109.407,271.329z M109.407,457.32 c-42.231,0-76.585-34.354-76.585-76.585s34.354-76.585,76.585-76.585s76.585,34.354,76.585,76.585S151.638,457.32,109.407,457.32z" /> </symbol> </svg> <main> <div class="content content--fixed"> <header class="codrops-header"> <div class="codrops-links"> <a class="codrops-icon codrops-icon--prev" href="http://www.jb51.net/" title="返回下载页"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a> <a class="codrops-icon codrops-icon--drop" href="http://www.jb51.net/" title="脚本之家"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a> </div> <h1 class="codrops-header__title">Animated Strokes</h1> <span class="info">with SVG and GSAP</span> </header> <nav class="topnav"> <a class="topnav__item" href="#">History</a> <a class="topnav__item" href="#">Route</a> <a class="topnav__item" href="#">Founders</a> </nav> <nav class="demos"> <a class="demo" href="index.html"><span>Demo 1</span></a> <a class="demo demo--current" href="index2.html"><span>Demo 2</span></a> </nav> <nav class="bike-nav"> <span class="bike-nav__item bike-nav__item--current"><span class="bike-nav__title">Cristian Pisani</span><svg class="icon icon--bike"><use xlink:href="#icon-bike"></use></svg></span> <span class="bike-nav__item"><span class="bike-nav__title">Derrick Cox</span><svg class="icon icon--bike"><use xlink:href="#icon-bike"></use></svg></span> <span class="bike-nav__item"><span class="bike-nav__title">Murilo Castro</span><svg class="icon icon--bike"><use xlink:href="#icon-bike"></use></svg></span> <span class="bike-nav__item"><span class="bike-nav__title">Jens Schmidt</span><svg class="icon icon--bike"><use xlink:href="#icon-bike"></use></svg></span> <span class="bike-nav__item"><span class="bike-nav__title">Guillaume Cormier</span><svg class="icon icon--bike"><use xlink:href="#icon-bike"></use></svg></span> </nav> </div> <div class="content"> <svg id="bike" viewBox="0 0 485.7 495.2"> <g id="mainpaths"> <path d="M397.4,276.9l-8.2-2.3c3-10.7,5.4-22.1,7.7-33c2.8-13.3,5.8-27.1,9.7-40l8.1,2.5c-3.8,12.5-6.7,26.1-9.5,39.2C402.8,254.5,400.4,265.9,397.4,276.9z" /> <path d="M217,228.4l-4.9-7l3.2-2.2c7.4-5.1,15.8-10.9,21.5-17.6l6.5,5.5c-6.4,7.5-15.3,13.6-23.1,19L217,228.4z" /> <path d="M193.5,238.1c11.8-2.3,21.8-10,27-20.8l-9.9,1.7c-4.5,6-11,10.2-18.4,11.6L193.5,238.1z" /> <path d="M184.7,279.5c-0.3-0.6-1.1-0.1-0.9,0.5c3.1,6.3-4.8,9.7-9.8,8.8s-9.9-4.2-14.4-6.6c-9.3-4.8-17.9-10.7-25.7-17.6c-0.5-0.4-1.2,0.3-0.7,0.7c9.9,9,21.5,15.6,33.4,21.7c4.3,2.2,9.4,4.2,14.1,2.2c3.7-1.4,5.5-5.6,4.1-9.3C184.8,279.8,184.8,279.6,184.7,279.5z" /> <path d="M261.3,227.1l-7.7-3.4c0.5-1.1,1-2.3,1.6-3.5c3.7-8.2,7.8-17.5,9.3-26.1l8.4,1.4c-1.6,9.7-6,19.6-9.9,28.2C262.3,224.8,261.8,226,261.3,227.1z" /> <path d="M174.4,286.1c-11.5-1.6-19-8-25.6-13.8c-4.8-4.1-8.9-7.7-13.9-8.9l4-16.5c9,2.2,15.4,7.7,21.1,12.6c5.7,4.9,10.3,8.9,16.8,9.8L174.4,286.1z" /> <path d="M167.7,263.8c-3.8-0.3-5.6-4-5.4-7.4c0.1-2.2,0.8-3.6,2.9-4.6c0.6-0.3,1.1-0.7,1.6-1.1c0.4-0.5-0.3-1.2-0.7-0.7c-1.1,1.4-3,1.4-3.9,3c-0.8,1.7-1.1,3.6-0.8,5.4c0.4,3.4,2.8,6.2,6.3,6.5C168.3,264.8,168.3,263.8,167.7,263.8z" /> <path d="M176.3,241.6c-0.8,0.9-2.1,1-3,1.6c-1,0.6-1.7,1.4-2.2,2.4c-0.3,0.6,0.6,1.1,0.9,0.5c0.6-1.2,1.6-2.1,2.9-2.5c0.9-0.2,1.6-0.7,2.3-1.3C177.4,241.8,176.7,241.1,176.3,241.6z" /> <path d="M209.9,271.3c-7.7-5.2-17.2-11.8-27.3-18.8c-17.2-11.9-35-24.2-48.2-32.9c-11.2-7.4-27.6-7.1-35.2,4.1l4.8,0.7c5.9-8.7,16.8-8.2,25-3.7l79.4,54.2l1.1-2.2l-0.3-0.2L209.9,271.3z" /> <path d="M225.2,222.5l-13.7,8.9c-4.4,2.8-9,5.6-14.3,5.8c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c4.9-0.2,9.3-2.4,13.4-5c5.1-3.2,10.1-6.5,15.2-9.8c0.2-0.2,0.3-0.5,0.1-0.7C225.8,222.5,225.5,222.4,225.2,222.5L225.2,222.5z" /> <path d="M128.9,258.9h3.8c0.2-8.1,6.7-14.6,14.8-14.9v-3.8C137.3,240.4,129.1,248.7,128.9,258.9z" /> <path d="M198.8,214.5c10.9-9.6,23.1-18.6,34.9-23.3l3.2,7.9c-10.9,4.4-26.1,14-36.1,22.8L198.8,214.5z" /> <path d="M250,254.1c-3.8,8-7.3,16.1-10.8,24.3c-0.3,0.6,0.7,0.9,1,0.3c3.4-8.1,6.9-16.1,10.7-24.1C251.1,254,250.3,253.5,250,254.1z" /> <path d="M204.3,321l2.9-2.5c-5.1-6.3-4.4-15.5,1.5-20.9l-2.5-2.9C198.6,301.6,197.8,313.1,204.3,321z" /> <path d="M219.5,52.3l-8.4-1c1.7-14.9,23.9-24.7,35.9-30l3.5,7.7C242.3,32.6,220.7,42.2,219.5,52.3z" /> <path d="M234.5,323.8c-7.6,7.6-18.9,10.4-29.3,7.2l-1.5,1.6c11.3,3.8,23.8,0.9,32.3-7.5

评论收藏

内容反馈

版权申诉