<div class="wrapper">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="70%" viewBox="87 70 207 130" enable-background="new 0 0 207 130" xml:space="preserve" class="bike">
<g class="wheel">
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="151.045" y1="175.928" x2="109.843" y2="123.071"/>
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="128.658" y1="117.454" x2="128.411" y2="184.59"/>
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="94.8" y1="149.889" x2="163.386" y2="153.191"/>
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="153.449" y1="128.225" x2="106.179" y2="174.612"/>
<path fill="#CF1D5A" d="M128.021,188.074c-9.931-0.291-19.153-4.433-25.97-11.661c-6.816-7.228-10.409-16.678-10.118-26.608
c0.291-9.931,4.432-19.153,11.66-25.969c7.229-6.816,16.678-10.411,26.609-10.118c9.931,0.291,19.154,4.431,25.97,11.66
c6.816,7.229,10.41,16.677,10.118,26.608c-0.291,9.931-4.432,19.153-11.66,25.971C147.402,184.772,137.953,188.365,128.021,188.074
z M130.035,119.451c-17.339-0.508-31.859,13.184-32.367,30.522c-0.509,17.339,13.184,31.859,30.522,32.368
s31.858-13.185,32.367-30.524C161.066,134.48,147.373,119.959,130.035,119.451z"/>
<path fill="#E34B94" d="M127.973,189.74c-10.376-0.303-20.013-4.63-27.134-12.182c-7.122-7.553-10.876-17.428-10.573-27.803
c0.305-10.376,4.632-20.013,12.184-27.135c7.552-7.121,17.426-10.876,27.802-10.571c10.376,0.304,20.012,4.629,27.134,12.183
c7.122,7.552,10.877,17.425,10.573,27.802c-0.305,10.374-4.631,20.012-12.184,27.136
C148.223,186.293,138.349,190.045,127.973,189.74z M130.185,114.343c-20.156-0.592-37.034,15.325-37.625,35.479
c-0.591,20.156,15.326,37.035,35.481,37.626s37.033-15.325,37.625-35.481C166.256,131.812,150.339,114.934,130.185,114.343z"/>
</g>
<polygon fill="#6EC8C0" points="133.501,154.787 130.53,143.516 131.478,142.611 134.744,155.011 "/>
<g class="wheel">
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="274.49" y1="173.81" x2="233.287" y2="120.954"/>
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="218.244" y1="147.771" x2="286.83" y2="151.075"/>
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="276.893" y1="126.106" x2="229.623" y2="172.494"/>
<line fill="none" stroke="#E34B94" stroke-width="6" stroke-miterlimit="10" x1="253.922" y1="116.884" x2="253.674" y2="184.02"/>
<path fill="#CF1D5A" d="M251.465,185.956c-9.931-0.292-19.153-4.433-25.97-11.661c-6.816-7.228-10.41-16.677-10.118-26.609
c0.291-9.931,4.432-19.151,11.66-25.968c7.228-6.817,16.678-10.41,26.608-10.119c9.931,0.291,19.154,4.431,25.971,11.66
c6.815,7.229,10.409,16.678,10.118,26.608c-0.292,9.931-4.433,19.154-11.661,25.971S261.396,186.247,251.465,185.956z
M253.478,117.332c-17.339-0.508-31.858,13.184-32.367,30.521c-0.509,17.339,13.184,31.859,30.522,32.369
s31.858-13.185,32.367-30.523S270.817,117.841,253.478,117.332z"/>
<path fill="#E34B94" d="M251.417,187.624c-10.377-0.305-20.013-4.631-27.135-12.184c-7.122-7.552-10.876-17.426-10.571-27.803
c0.304-10.377,4.631-20.012,12.183-27.136c7.553-7.121,17.426-10.875,27.802-10.571s20.014,4.631,27.135,12.183
c7.122,7.552,10.876,17.426,10.572,27.802s-4.631,20.014-12.184,27.136C271.667,184.174,261.792,187.929,251.417,187.624z
M253.627,112.225c-20.155-0.59-37.033,15.325-37.624,35.48c-0.592,20.156,15.325,37.034,35.48,37.625s37.033-15.325,37.625-35.481
C289.7,129.694,273.783,112.816,253.627,112.225z"/>
</g>
<g>
<circle fill="#ffffff" cx="128.724" cy="151.315" r="6.811"/>
<path fill="#ffffff" d="M171.646,86.625c-0.025-0.189-0.009-2.965-2.433-3.467c-2.424-0.501-13.567-0.494-18.693-1.791
c-5.127-1.298-9.335-1.327-10.013-1.012c-0.679,0.315-1.824,1.86-1.646,2.295c0.174,0.426,9.859,6.749,14.453,6.934l4.118,11.536
l2.431-0.868l-3.87-10.841c4.483-0.498,10.34-1.858,11.466-1.905C168.8,87.451,171.794,87.753,171.646,86.625z"/>
<rect x="190.812" y="67.777" transform="matrix(0.0266 0.9996 -0.9996 0.0266 287.593 -94.3572)" fill="#6EC8C0" width="2.868" height="65.424"/>
<path fill="#6EC8C0" d="M228.771,105.011l-2.734-2.32l-45.119,53.162l-20.732-56.291l-3.364,1.239l1.044,2.834
c-2.156,3.228-4.329,6.442-6.516,9.647c-1.125,1.657-2.258,3.309-3.393,4.96l-3.405,4.952c-2.282,3.293-4.552,6.594-6.851,9.875
c-2.157,3.091-4.309,6.185-6.479,9.266c-0.134,0.19-0.269,0.381-0.402,0.57c-0.633,0.731-1.2,1.482-1.733,2.274
c-0.534,0.803-1.025,1.642-1.418,2.541c-0.196,0.447-0.366,0.913-0.49,1.399c-0.123,0.486-0.201,0.994-0.184,1.519
c0.018,0.522,0.138,1.065,0.408,1.545c0.271,0.483,0.654,0.856,1.058,1.167c0.816,0.615,1.724,1.008,2.635,1.338
c0.915,0.325,1.847,0.57,2.784,0.777c1.867,0.405,3.744,0.657,5.651,0.812l10.005,1.538l10.007,1.582
c3.334,0.54,6.669,1.075,10,1.633c3.333,0.55,10.135,1.826,10.135,1.826L228.771,105.011z M169.767,159.5
c-3.351-0.424-6.699-0.873-10.047-1.316l-10.04-1.366l-10.033-1.41l-0.02-0.003l-0.018-0.001c-0.922-0.056-1.863-0.156-2.789-0.283
c-0.929-0.127-1.853-0.283-2.765-0.479c-0.912-0.196-1.814-0.434-2.685-0.737c-0.865-0.308-1.715-0.681-2.416-1.206
c-0.345-0.261-0.65-0.569-0.844-0.913c-0.196-0.347-0.295-0.751-0.306-1.173c-0.013-0.423,0.053-0.858,0.164-1.289
c0.112-0.431,0.269-0.855,0.452-1.273c0.369-0.835,0.839-1.634,1.357-2.404c0.518-0.767,1.091-1.517,1.692-2.202l0.018-0.021
l0.012-0.019c2.313-3.271,4.65-6.526,6.98-9.783c2.325-3.262,4.679-6.505,7.02-9.756l3.53-4.863
c1.177-1.622,2.355-3.24,3.542-4.855c2.026-2.77,4.063-5.53,6.113-8.282l20.169,54.766
C175.825,160.267,172.794,159.894,169.767,159.5z"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="19" stroke-miterlimit="10" cx="179.132" cy="159.288" r="7.242"/>
<circle fill="#FFFFFF" cx="253.833" cy="149.247" r="6.811"/>
<path fill="#6EC8C0" d="M226.864,95.347l10.847,30.544l0.331,0.936l0.084,0.233l0.077,0.209l0.172,0.456
c0.231,0.61,0.471,1.22,0.713,1.827c0.485,1.216,0.988,2.426,1.51,3.625c1.045,2.397,2.155,4.769,3.417,7.022
c0.315,0.562,0.643,1.114,0.984,1.652c0.17,0.266,0.35,0.539,0.521,0.782c0.178,0.253,0.364,0.502,0.559,0.747
c0.779,0.984,1.665,1.913,2.599,2.799c0.937,0.887,1.925,1.73,2.943,2.538c0.509,0.404,1.027,0.799,1.552,1.185
c0.521,0.384,1.062,0.768,1.587,1.116c0,0,0.264,0.565-0.027,0.915c-0.29,0.351-0.819,0.443-0.819,0.443
c-0.592-0.357-1.147-0.718-1.709-1.092c-0.559-0.374-1.109-0.757-1.655-1.152c-1.088-0.788-2.152-1.619-3.179-2.508
c-1.024-0.891-2.014-1.837-2.925-2.89c-0.229-0.264-0.451-0.532-0.666-0.812c-0.223-0.288-0.418-0.56-0.616-0.843
c-0.394-0.562-0.766-1.134-1.124-1.709c-1.428-2.306-2.668-4.683-3.844-7.084c-0.587-1.203-1.153-2.412-1.703-3.63
c-0.274-0.611-0.545-1.222-0.811-1.838l-0.198-0.463l-0.106-0.251l-0.093-0.229l-0.373-0.92l-12.093-29.767L226.864,95.347z"/>
<path fill="#FFFFFF" d="M222.269,97.818c-0.125-0.054-0.198-0.131-0.259-0.213c-0.06-0.083-0.096-0.175-0.119-0.274
c-0.011-0.049-0.019-0.101-0.022-0.152c0-0.053-0.012-0.104,0.012-0.17c0.042-0.125,0.246-0.324,0.345-0.475
c0.048-0.075,0.067-0.137,0.059-0.188c-0.002-0.053-0.008-0.105-0.016-0.156c-0.015-0.102-0.043-0.198-0.076-0.293
c-0.068-0.187-0.175-0.357-0.262-0.537c-0.087-0.181-0.146-0.371-0.167-0.579c-0.01-0.104,0.003-0.219,0.048-0.348
c0.045-0.127,0.116-0.268,0.182-0.404c0.021-0.036,0.016-0.061,0.083-0.118c0.07-0.058,0.16-0.124,0.198-0.168
c0.018-0.021,0.009-0.031,0.004-0.042l-0.014-0.036l-0.03-0.067l-0.116-0.276c-0.08-0.183-0.159-0.365-0.244-0.544
c-0.333-0.726-0.71-1.431-1.082-2.137c-0.184-0.354-0.367-0.709-0.538-1.07c-0.09-0.178-0.173-0.358-0.257-0.54l-0.122-0.272
l-0.061-0.137l-0.004-0.009c-0.033-0.071,0.042,0.087,0.033,0.069l-0.014-0.027l-0.021-0.044l-0.039-0.081
c-0.198-0.417-0.354-0.83-0.486-1.269c-0.135-0.436-0.234-0.892-0.291-1.382c-0.05-0.49-0.066-1.019,0.07-1.618
c0.068-0.296,0.182-0.613,0.37-0.917c0.187-0.301,0.446-0.583,0.739-0.783c0.294-0.201,0.606-0.328,0.897-0.409
c0.294-0.078,0.57-0.117,0.834-0.131c0.537-0.024,0.964,0.05,1.392,0.105c0.425,0.058,0.841,0.075,1.268,0.023
c0.107-0.014,0.213-0.023,0.321-0.047c0.109-0.031,0.229-0.11,0.354-0.218c0.25-0.222,0.522-0.554,0.747-0.636
c0.057-0.021,0.11-0.032,0.162-0.031c0.051,0.003,0.101,0.016,0.15,0.024l0.299,0.055l0.593,0.112l1.172,0.219
c0.774,0.154,1.543,0.298,2.306,0.44c1.521,0.29,3.026,0.542,4.505,0.738c1.478,0.188,2.936,0.307,4.312,0.271
c0.687-0.017,1.351-0.078,1.971-0.193c0.62-0.119,1.192-0.289,1.71-0.531l2.072,2.888c-0.779,0.686-1.678,1.184-2.58,1.533
c-0.903,0.355-1.816,0.574-2.714,0.724c-1.798,0.288-3.543,0.285-5.237,0.177c-0.423-0.029-0.844-0.066-1.262-0.107
c-0.418-0.045-0.833-0.096-1.246-0.15c-0.826-0.106-1.64-0.249-2.446-0.389c-0.806-0.148-1.602-0.313-2.389-0.477l-1.17-0.258
l-0.578-0.127l-0.288-0.062c-0.047-0.012-0.097-0.019-0.143-0.035c-0.046-0.017-0.09-0.046-0.131-0.088
c-0.167-0.16-0.285-0.565-0.427-0.863c-0.07-0.145-0.148-0.26-0.234-0.326c-0.088-0.06-0.177-0.106-0.267-0.154
c-0.357-0.189-0.729-0.299-1.096-0.341c-0.362-0.04-0.732-0.042-0.992-0.026c-0.272,0.015-0.47,0.091-0.523,0.156
c-0.03,0.031-0.044,0.052-0.057,0.096c-0.013,0.041-0.029,0.106-0.037,0.2c-0.014,0.188,0.016,0.467,0.087,0.762
c0.139,0.593,0.413,1.269,0.702,1.881l0.026,0.053l0.012,0.023l0.048,0.102l0.058,0.136l0.117,0.276
c0.075,0.184,0.15,0.369,0.221,0.556c0.146,0.37,0.281,0.747,0.415,1.123c0.265,0.754,0.523,1.51,0.827,2.247
c0.074,0.186,0.153,0.369,0.232,0.552l0.122,0.273l0.031,0.067l0.015,0.034c0.006,0.012,0.008,0.024,0.034,0.026
c0.058,0.002,0.168-0.019,0.258-0.03c0.087-0.012,0.102,0.009,0.143,0.018c0.145,0.046,0.297,0.089,0.42,0.145
c0.125,0.054,0.217,0.123,0.286,0.201c0.139,0.157,0.238,0.331,0.31,0.517c0.073,0.186,0.126,0.38,0.216,0.55
c0.046,0.088,0.099,0.174,0.163,0.254c0.033,0.041,0.066,0.081,0.104,0.119c0.031,0.04,0.091,0.069,0.178,0.085
c0.178,0.031,0.462,0.016,0.583,0.072c0.062,0.026,0.092,0.069,0.131,0.106c0.036,0.039,0.068,0.079,0.097,0.121
c0.058,0.083,0.1,0.174,0.12,0.274c0.02,0.1,0.024,0.207-0.02,0.334L222.269,97.818z"/>
</g>
<g id="chain">
<path class="chain" d="M125.186,154.956
c0.548,0.489,1.141,0.883,1.696,1.14c6.94,3.211,13.605,6.173,20.943,8.407c7.894,2.404,15.904,4.401,23.925,6.327
c5.914,1.42,15.493,2.594,18.958-4.052c1.294-2.482,0.438-6.672-1.036-8.883c-3.924-5.885-9.22-6.785-15.695-8.514
c-9.738-2.599-19.856-2.875-29.876-2.884c-1.152-0.001-2.305,0.006-3.457,0.006c-3.696,0.216-7.493-0.4-11.12,0.564
c-1.349,0.36-5.403,1.114-6.052,2.335C122.427,151.401,123.626,153.565,125.186,154.956z"/>
</g>
</svg>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> <script src="https://lf6... </head>
<body>
</body>
$fendersblue: #165578;
body {
background: $fendersblue;
overflow: hidden;
}
.wrapper {
width: 50%;
margin: 50px auto;
cursor:pointer;
transition: transform 3s ease-out;
}
.wrapper.ride .bike {
animation: rideaway 3s forwards;
}
@keyframes rideaway {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(200%, 0, 0);
}
}
// Set the SVG to be 100% of the container
.bike {
width: 100%;
}
.wheel {
transform-origin: 50% 50%; //rotate from the centre
/*-This will fix the issue-*/
transform-box: fill-box;
/*-----------------------*/
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.chain {
fill: none;
stroke: #fff;
stroke-width:2px;
stroke-dasharray: 5;
stroke-dashoffset: 5;
animation:movechain 0.2s normal linear infinite;
}
@keyframes movechain {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 10;
}
}
// 点击一次即骑走，再次点击骑回来
$(document).ready(function() {
ride();
});
function ride() {
$('.wrapper').click(function() {
$(this).toggleClass('ride');
});
}