<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG和CSS3实现的骑单车动画</title>
<style>
.fill--none {
fill: none;
}
.fill--blue {
fill: #03354a;
}
.fill--lavender-dark {
fill: #8a7c85;
}
.fill--lavender {
fill: #70626d;
}
.fill--teal {
fill: #7bc1bf;
}
.fill--teal-light {
fill: #cce4e3;
}
.fill--yellow-dark {
fill: #f39f4e;
}
.fill--yellow-light {
fill: #feecd6;
}
.stroke--blue {
stroke: #03354a;
}
.stroke--2px {
stroke-width: 2px;
}
.stroke--3px {
stroke-width: 3px;
}
.stroke--dasharray {
stroke-dasharray: 0 5;
}
.stroke--round {
stroke-linecap: round;
stroke-linejoin: round;
}
.opacity--02 {
opacity: 0.2;
}
.bicycle {
width: 500px;
height: 306px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.seat-highlight {
fill: none;
stroke: #fff;
}
.chain-rings,
.wheel-front,
.wheel-rear,
.cogset-top,
.crankarm-left,
.crankarm-right,
.pedal-left,
.pedal-right,
.pedal-left-inner,
.pedal-right-inner {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.chain-rings,
.wheel-front,
.wheel-rear,
.cogset-top,
.crankarm-left,
.crankarm-right,
.pedal-left,
.pedal-right {
-webkit-animation-name: spin;
animation-name: spin;
}
.pedal-left-inner,
.pedal-right-inner {
-webkit-animation-name: pedal;
animation-name: pedal;
}
.chain-move {
-webkit-animation: chain 0.075s linear forwards infinite;
animation: chain 0.075s linear forwards infinite;
}
.chain-move--reverse {
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.chain-rings,
.wheel-front,
.wheel-rear,
.cogset-top,
.pedal-right-inner,
.pedal-left-inner {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-moz-document url-prefix() {
.wheel-front {
transform-origin: 472.4px 240px;
}
.wheel-rear {
transform-origin: 121.7px 240.9px;
}
.pedal-left-inner {
transform-origin: 217.5px 226px;
}
.pedal-right-inner {
transform-origin: 318px 310px;
}
.chain-rings {
transform-origin: 268px 268.9px;
}
.cogset-top {
transform-origin: 121.7px 240.9px;
}
}
.crankarm-right,
.crankarm-left,
.pedal-right,
.pedal-left {
-webkit-transform-origin: 268px 268px;
transform-origin: 268px 268px;
}
.line-rear-wheel,
.line-front-wheel-long,
.line-front-wheel-short {
-webkit-animation: line-wheel 2.8s linear forwards infinite;
animation: line-wheel 2.8s linear forwards infinite;
}
@-webkit-keyframes chain {
from {
-webkit-transform: translate3d(-2px, 0, 0);
transform: translate3d(-2px, 0, 0);
}
to {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
}
@keyframes chain {
from {
-webkit-transform: translate3d(-2px, 0, 0);
transform: translate3d(-2px, 0, 0);
}
to {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes pedal {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
25% {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
50% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
75% {
-webkit-transform: rotate(-290deg);
transform: rotate(-290deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes pedal {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
25% {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
50% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
75% {
-webkit-transform: rotate(-290deg);
transform: rotate(-290deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes line-wheel {
0% {
-webkit-transform: translate3d(500px, 0, 0);
transform: translate3d(500px, 0, 0);
}
100% {
-webkit-transform: translate3d(-650px, 0, 0);
transform: translate3d(-650px, 0, 0);
}
}
@keyframes line-wheel {
0% {
-webkit-transform: translate3d(500px, 0, 0);
transform: translate3d(500px, 0, 0);
}
100% {
-webkit-transform: translate3d(-650px, 0, 0);
transform: translate3d(-650px, 0, 0);
}
}
body {
font-family: -apple-system, ".SFNSDisplay-Regular", Roboto, Helvetica, Arial, sans-serif;
background-color: #fed879;
}
.footer {
color: #70626d;
background-color: rgba(243, 159, 78, 0.5);
text-align: center;
padding: 1em;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.footer a {
color: #03354a;
}
.footer a:hover {
text-decoration: none;
}
.footer-period {
display: none;
}
.footer-text {
font-size: 0.8em;
font-weight: 600;
}
@media (min-width: 420px) {
.footer-br {
display: none;
}
.footer-spacing {
margin-left: 1em;
}
}
@media (max-width: 520px) {
.bicycle {
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.775);
transform: translate3d(-50%, -50%, 0) scale(0.775);
}
}
@media (max-width: 420px) {
.bicycle {
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.5);
transform: translate3d(-50%, -50%, 0) scale(0.5);
}
}
</style>
</head>
<body>
<svg class="bicycle" viewBox="0 0 588.35 360.02">
<g class="pedal-left">
<g class="pedal-left-inner">
<rect class="stroke--round stroke--blue stroke--3px fill--yellow-light" x="195.03" y="221.14" width="44.03" height="10.5" transform="translate(-1.33 0.87) rotate(-0.36)" />
<rect class="stroke--round stroke--3px fill--yellow-dark stroke--blue" x="202.67" y="221.14" width="28.76" height="10.5" transform="translate(-1.33 0.87) rotate(-0.36)" />
<circle class="stroke--round stroke--3px fill--lavender stroke--blue" cx="217.05" cy="226.53" r="4.92" transform="translate(-1.34 0.87) rotate(-0.36)" />
</g>
</g>
<g class="crankarm-left">
<path class="stroke--round stroke--blue stroke--3px fill--yellow-light" d="M260.88,273.28a8.71,8.71,0,0,1-2-5.17c-0.1-2.66-45.48-41.23-45.48-41.23l3.9-3.88s49.23,35.94,50.8,36A8.75,8.75,0,1,1,260.88,273.28Z" transform="translate(0.07 -0.48)" />
<circle class="stroke--round fill--lavender stroke--2px stroke--blue" cx="267.72" cy="267.61" r="2.33" />
</g>
<path class="fender-front stroke--round stroke--3px fill--lavender stroke--blue" d="M585.81,222.11l-13.81,2a100.2,100.2,0,1,0-194.52,47.07L361.88,286c-0.61-1.48-1.2-3-1.74-4.47A117.19,117.19,0,1,1,585.81,222.11Z" transform="translate(0.07 -0.48)" />
<path class="fender-rear stroke--round stroke--3px fi
