TweenMax+svg实现自行车行驶转动loading加载动画效果代码-html代码-BFW代码库

TweenMax+svg实现自行车行驶转动loading加载动画效果代码

代码语言：html

代码描述：TweenMax+svg实现自行车行驶转动loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
.container {  background-color: #9edac0;  display: flex;  justify-content: center;  align-items: center;  width: 100vw;  height: 100vh;}svg {  visibility: hidden;  width: 500px;  height: 500px;}.loading {  font-size: 24px;  letter-spacing: 1px;}
</style>
</head>

<body>
    <div class="container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 509.88 346.42" style="visibility: visible;"><title>Cycle loader</title><text class="loading" x="140" y="50" data-svg-origin="140 24.709951400756836" transform="matrix(1,0,0,1,0,5.469812062584965)" style="">LOADING</text><circle cx="381.99" cy="217.27" r="57" fill="none"></circle><rect x="205.49" y="100.77" width="130" height="10" fill="#c11" stroke="#c11" stroke-miterlimit="10"></rect><rect x="335.99" y="59.27" width="10" height="58.84" fill="#c11" stroke="#c11" stroke-miterlimit="10"></rect><rect x="687.32" y="367.76" width="9.47" height="129.52" transform="translate(32.95 -610.41) rotate(39.23)" fill="#c11" stroke="#c11" stroke-miterlimit="10"></rect><rect x="615.67" y="333.48" width="9.89" height="150.8" transform="translate(-499.92 -29.09) rotate(-20.33)" fill="#c11" stroke="#c11" stroke-miterlimit="10"></rect><rect x="346.9" y="59.27" width="36.97" height="10" fill="#2a2d2c" stroke="#2a2d2c" stroke-miterlimit="10"></rect><path d="M779.38,329a30.2,30.2,0,0,1,17.28,6.85,22.87,22.87,0,0,1,5.81,7.44,18.46,18.46,0,0,1,1.81,9.24,17.69,17.69,0,0,1-3,8.57A20.36,20.36,0,0,1,795,367a25.93,25.93,0,0,1-15.65,3.57,24.5,24.5,0,0,0,14-5.78,17,17,0,0,0,4.28-5.73,12.81,12.81,0,0,0,1.1-6.53,13.55,13.55,0,0,0-7-10A20.68,20.68,0,0,0,779.38,340Z" transform="translate(-396.51 -270.23)" fill="#2a2d2c"></path><rect id="seat" x="165.99" y="58.27" width="63.01" height="10" fill="#2a2d2c" stroke="#2a2d2c" stroke-miterlimit="10"></rect><g id="back-wheel"><circle id="wheel" cx="130.99" cy="217.27" r="80" fill="none" stroke="#2a2d2c" stroke-miterlimit="10" stroke-width="6"></circle><circle id="wheel-ring" cx="130.99" cy="217.27" r="76" fill="none" stroke="#9ab0a6" stroke-miterlimit="10" stroke-width="3"></circle><circle id="wheel-center" cx="130.99" cy="217.27" r="9.64" fill="#2a2d2c" stroke="#2a2d2c" stroke-miterlimit="10"></circle><g id="back-light"><rect x="116.32" y="156.9" width="28.67" height="9.57" rx="4.79" fill="#fff" data-svg-origin="130 215" transform="matrix(0.43711,0.8994,-0.8994,0.43711,266.54707942214725,4.097427466420356)" style="transform-origin: 0px 0px 0px;"></rect><rect x="117.32" y="266.9" width="28.67" height="9.57" rx="4.79" fill="#fff" stroke="#fff" stroke-miterlimit="10" data-svg-origin="130 215" transform="matrix(0.43711,0.8994,-0.8994,0.43711,266.54707942214725,4.097427466420356)" style="transform-origin: 0px 0px 0px;"></rect></g></g><g id=.........完整代码请登录后点击上方下载按钮下载查看