CSS3：行驶中的自行车，浪起来吧！
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
.canvas{
width: 80%;
height:80%;
background:#ccc;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
overflow: hidden;
}
.road{
width: 100%;
height:100px;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
background:#333;
transform: rotateX(30deg);
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.road>span{
width: 100%;
height:5px;
border-width:5px;
border-style:solid;
border-color:#999 transparent #666;
background:#fff;
}
.road>div{
width: 100%;
height:5px;
display: -webkit-flex;
display: flex;
align-items: center;
animation: road .1s linear infinite;
}
.road>div>i{
width: 15px;
height:2px;
margin-right:3px;
background:#fff;
}
.bicycle{
width:80%;
height:60%;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
.chain{
width: 500px;
height:250px;
position:absolute;
left:-185px;
right:0;
bottom:18px;
margin: auto;
transform: rotate(5deg);
z-index: 1;
}
.top-chain{
width: 200px;
height:3px;
transform: rotate(-7deg);
margin-top:84px;
margin-left:80px;
overflow: hidden;
}
.bottom-chain{
width: 179px;
height:3px;
transform: rotate(6deg);
margin-top:58px;
margin-left:88px;
overflow: hidden;
}
.top-chain>div{
width: 300px;
display: -webkit-flex;
display: flex;
align-items: center;
animation: topChain .1s linear infinite;
}
.bottom-chain>div{
width: 300px;
display: -webkit-flex;
display: flex;
align-items: center;
animation: road .1s linear infinite;
}
.top-chain>div>i{
margin-right:3px;
width: 15px;
height:5px;
background:#b7b6b6;
}
.bottom-chain>div>i{
margin-right:3px;
width: 15px;
height:5px;
background:#b7b6b6;
}
.right-axis{
width: 80px;
height:80px;
border-radius:50%;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
background:#ccc;
border:3px dashed #999;
position:absolute;
right:180px;
top:73px;
animation: axis .8s linear infinite;
z-index:1;
}
.right-axis>i{
width: 30px;
height:30px;
border-radius:50%;
background:#999;
border:2px dashed #666;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.left-axis{
width: 37px;
height:37px;
border-radius:50%;
border:3px dashed #999;
position:absolute;
left:70px;
top:95px;
animation: axis .8s linear infinite;
z-index:0;
}
.left-tread{
width:100px;
height:100px;
border-radius:50%;
position: absolute;
right:173px;
top:66px;
animation: axis .8s linear infinite;
}
.right-tread{
width:100px;
height:100px;
border-radius:50%;
position: absolute;
right:173px;
top:66px;
z-index:2;
animation: axis .8s linear infinite;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.right-tread .top,
.left-tread .top{
width: 20px;
height:20px;
border-radius:50%;
background:#fff;
display: block;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
}
.right-tread .top>i{
width: 10px;
height:10px;
background:#333;
display: block;
}
.right-tread .top::before,
.left-tread .top::before{
content:'';
width: 2px;
height:80px;
background:#fff;
display: block;
transform: rotate(-3deg);
margin-top:10px;
margin-left:2px;
}
.left-tread .top::before{
transform: rotate(3deg);
margin-top:-70px;
}
.right-tread .top::after,
.left-tread .top::after{
content:'';
width: 2px;
height:80px;
background:#fff;
display: block;
transform: rotate(3deg);
margin-top:10px;
position: absolute;
right:2px;
top:0;
}
.left-tread .top::after{
transform: rotate(-3deg);
top:-78px;
}
.right-tread .bottom,
.left-tread .bottom{
width: 12px;
height:12px;
background:#fff;
border-radius: 50%;
position: absolute;
bottom:-36px;
left:0;
right:0;
margin:auto;
}
.left-tread .bottom{
bottom:123px;
}
.right-tread .left,
.left-tread .left{
width: 50px;
height:30px;
background:#fff;
position:absolute;
bottom:-52px;
left:0;
right:0;
margin:auto;
transform: rotateX(65deg) rotateY(0deg) rotateZ(90deg);
transform-style: preserve-3d;
box-shadow: 10px 0px 8px #949494;
}
.left-tread .left{
bottom:122px;
box-shadow: -10px 0px 8px #949494;
}
.right-axis>span{
width: 100%;
height:10px;
border:2px solid #f8f8f8;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
box-sizing: border-box;
z-index:-1;
border-width: 2px 0px;
}
.right-axis>span:nth-child(3){
transform: rotate(45deg);
}
.right-axis>span:nth-child(4){
transform: rotate(90deg);
}
.right-axis>span:nth-child(5){
transform: rotate(135deg);
}
.back-wheel,.before-wheel{
width: 200px;
height:200px;
border-radius:50%;
border:15px solid #222;
position:absolute;
bottom:0;
left:-318px;
right:0;
top:-18px;
margin:auto;
animation: axis .5s linear infinite;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.before-wheel{
left:444px;
top:-98px;
}
.back-wheel:before,
.before-wheel:before{
content:'';
width: 230px;
height:230px;
display: block;
border-radius:50%;
position: absolute;
left:-15px;
top:-15px;
border:2px dashed #fff;
box-shadow: inset 0 0 15px #fff;
z-index:1;
box-sizing: border-box;
}
.back-wheel:after,
.before-wheel:after{
content:'';
width: 204px;
height:204px;
display: block;
border-radius:50%;
position: absolute;
left:-3px;
top:-3px;
border:1px solid #f2f2f2;
z-index:1;
}
.back-wheel>i,
.before-wheel>i{
width: 100%;
height:10px;
border:2px solid #f2f2f2;
border-width: 2px 0 ;
position: absolute;
left:0;
right:0;
margin:auto;
}
.back-wheel>i:nth-child(2),
.before-wheel>i:nth-child(2){
transform: rotate(30deg);
}
.back-wheel>i:nth-child(3),
.before-wheel>i:nth-child(3){
transform: rotate(60deg);
}
.back-wheel>i:nth-child(4),
.before-wheel>i:nth-child(4){
transform: rotate(90deg);
}
.back-wheel>i:nth-child(5),
.before-wheel>i:nth-child(5){
transform: rotate(120deg);
}
.back-wheel>i:nth-child(6),
.before-wheel>i:nth-child(6){
transform: rotate(150deg);
}
.back-wheel>div,
.before-wheel>div{
width: 20px;
height:20px;
/* background:radial-gradient(#fff 5%,#000 95%); */
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
background:#bfbfbf;
z-index:1;
}
.back-wheel>div:before,
.before-wheel>div:before{
content:'';
background:radial-gradient(#fff,#000);
width: 10px;
height:10px;
display: block;
border-radius:50%;
}
.before-stand{
width: 120px;
height:18px;
box-shadow: inset 0px -6px 15px #afafaf;
position: absolute;
bottom:218px;
right:-94px;
background:#f2f2f2;
transform: rotate(65deg);
}
.top-stand{
width: 120px;
height:18px;
box-shadow: inset 0px -6px 15px #afafaf;
position: absolute;
bottom:344px;
right:-35px;
background:#f2f2f2;
transform: rotate(65deg);
z-index: 2;
}
.center-top-stand{
width: 267px;
height:18px;
box-shadow: inset 0px 6px 15px #afafaf;
position: absolute;
bottom:315px;
right:30px;
background:#f2f2f2;
transform: rotate(-15deg);
z-index:-1;
}
.center-stand{
width: 264px;
height:18px;
box-shadow: inset 0px -6px 15px #afafaf;
position: absolute;
bottom:240px;
right:145px;
background:#f2f2f2;
transform: rotate(65deg);
}
.center-bottom-stand{
width: 296px;
height:18px;
box-shadow: inset 0px -6px 15px #afafaf;
position: absolute;
bottom:236px;
right:-28px;
background:#f2f2f2;
transform: rotate(-47deg);
}
.left-bottom-stand{
width: 200px;
height:9px;
box-shadow: inset 0px -4px 8px #afafaf;
position: absolute;
bottom:126px;
right:200px;
background:#f2f2f2;
transform: rotate(1deg);
}
.left-top-stand{
width: 180px;
height:9px;
box-shadow: inset 0px 4px 8px #afafaf;
position: absolute;
bottom:210px;
right:263px;
background:#f2f2f2;
transform: rotate(-55deg);
z-index:0;
}
.before-stand>div{
width: 20px;
height:20px;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
background:#bfbfbf;
z-index:1;
position:absolute;
top:-1px;
right:-9px;
display: flex;
justify-content: center;
align-items: center;
}
.before-stand>div:before{
content:'';
background:radial-gradient(#fff,#000);
width: 10px;
height:10px;
display: block;
border-radius:50%;
}
.plug{
width: 22px;
height:22px;
background:#333;
position:absolute;
top:-50px;
right:-16px;
transform: rotate(-25deg);
border-radius:2px;
box-shadow: inset 0 0 15px #ccc;
transform-style: preserve-3d;
}
.plug .top{
width: 22px;
height: calc(22px / 2);
border-radius:50%;
background:#fff;
transform: rotateX(70deg) translateY(-18px);
}
.plug .bottom{
width: 22px;
height: calc(22px / 2);
border-radius:50%;
background:#fff;
transform: rotateX(70deg) translateY(13px);
}
.plug-top{
width: 22px;
height:22px;
background:#333;
position:absolute;
top:-176px;
right:43px;
transform: rotate(-25deg);
border-radius:2px;
box-shadow: inset 0 0 15px #ccc;
transform-style: preserve-3d;
}
.plug-top .top{
width: 22px;
height: calc(22px / 2);
border-radius:50%;
background:#fff;
transform: rotateX(70deg) translateY(-18px);
}
.plug-top .bottom{
width: 22px;
height: calc(22px / 2);
border-radius:50%;
background:#fff;
transform: rotateX(70deg) translateY(13px);
}
.handgrip{
width: 48px;
height:50px;
border-left: 10px solid #a09f9f;
border-top: 5px solid #a09f9f;
border-bottom: 5px solid #a09f9f;
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
position:absolute;
top:-256px;
right:30px;
transform: rotate(-30deg);
}
.handgrip::before,
.handgrip::after{
content:'';
width: 30px;
height: 12px;
display: block;
background:#333;
border-radius:10px;
margin-left:25px;
margin-top:-10px;
}
.handgrip::after{
margin-top:43px;
}
.hand{
width: 22px;
height:50px;
position: absolute;
right:54px;
top:-214px;
transform: rotate(-28deg);
display: -webkit-flex;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
}
.hand:before{
content:'';
width:8px;
height:50px;
box-shadow: inset -2px 0 10px #4a4a4a;
display: block;
}
.hand:after{
content:'';
width: 22px;
height: calc(22px / 2);
border-radius: 50%;
background: #ccc;
transform: rotateX(70deg) translateY(-18px);
display: block;
}
.seat{
width: 150px;
height:50px;
position:absolute;
top:-148px;
left:115px;
transform: rotateZ(-5deg) rotateX(30deg);
transform-style: preserve-3d;
}
.seat:before{
content:'';
position: absolute;
left:10px;
top:-8px;
border-color:transparent transparent transparent #fff;
border-width: 22px 0 22px 110px;
border-style:solid;
width: 10px;
height:10px;
}
.seat .top{
width: 100px;
height:1px;
background:#fff;
display: block;
transform: rotate(10deg);
margin-left:15px;
}
.seat .right{
width: 20px;
height:20px;
position:absolute;
right:27px;
top:9px;
border-radius:50%;
background:#fff;
}
.seat .bottom{
width: 100px;
height:1px;
background:#fff;
transform: rotate(-10deg);
position: absolute;
right:35px;
bottom:12px;
}
.seat .left{
width: 34px;
height:54px;
position:absolute;
left:-4px;
top:-8px;
border-radius:50%;
background:#fff;
}
.seat>div{
width: 10px;
height:30px;
background:#333;
position:absolute;
left:40px;
bottom:-18px;
z-index:-1;
transform: rotate(-20deg);
}
.seat>div:before{
content:'';
width: 10px;
height:30px;
background:#333;
position:absolute;
left:0;
top:0;
z-index:-1;
}
.seat>div:after{
content:'';
width: 5px;
background:#666;
height:30px;
position:absolute;
bottom:-26px;
right:0;
z-index:-2;
}
.seat>div>i{
width: 100%;
height:2px;
display: block;
margin-top:5px;
background:#f2f2f2;
}
@keyframes road{
form{ transform: translate3d(0 ,0 ,0 ); }
to{ transform: translate3d(-18px ,0 ,0 ); }
}
@keyframes topChain{
form{ transform: translate3d(0 ,0 ,0 ); }
to{ transform: translate3d(18px ,0 ,0 ); }
}
@keyframes axis{
form{ transform:rotate(0deg) }
to{ transform:rotate(360deg) }
}
@keyframes wheel{
form{ transform:rotate(0deg) }
to{ transform:rotate(-360deg) }
}
</style>
<div class="canvas">
<!--道路-->
<div class="road">
<span></span>
<div class="line">
<i></i>
</div>
<span></span>
</div>
<!--道路-->
<!--自行车-->
<div class="bicycle">
<div class="chain">
<!-- 左踩踏 -->
<div class="left-tread">
<i class="top"></i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
</div>
<!-- 后轮 -->
<div class="back-wheel">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<div>
</div>
</div>
<!-- 上链 -->
<div class="top-chain">
<div>
<i></i>
</div>
</div>
<!-- 下链 -->
<div class="bottom-chain">
<div>
<i></i>
</div>
</div>
<!-- 左轴 -->
<div class="left-axis"></div>
<!-- 前轮 -->
<div class="before-wheel">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<div>
</div>
</div>
<!-- 自行车架子 -->
<div class="stand">
<div class="plug">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="plug-top">
<div class="top"></div>
<div class="bottom"></div>
</div>
<!-- 前轮架子 -->
<div class="before-stand">
<div>
</div>
</div>
<div class="top-stand">
<div>
</div>
</div>
<!-- 中上架子 -->
<div class="center-top-stand">
</div>
<!-- 左上架子 -->
<div class="left-top-stand">
</div>
<!-- 中架子 -->
<div class="center-stand">
</div>
<!-- 中下架子 -->
<div class="center-bottom-stand">
</div>
<!-- 左下架子 -->
<div class="left-bottom-stand">
</div>
<div class="hand">
</div>
<!-- 手把 -->
<div class="handgrip">
</div>
<div class="handgrip">
</div>
</div>
<!-- 右轴 -->
<div class="right-axis">
<i></i>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 右踩踏 -->
<div class="right-tread">
<i class="top">
<i></i>
</i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
</div>
<div class="seat">
<i class="top"></i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = function(){
var w = (document.querySelector(".canvas").offsetWidth / 18).toFixed(0) ,
cW = (document.querySelector(".top-chain").offsetWidth / 18).toFixed(0)
var i = document.createElement("i")
for(let o = 0;o<w;o++){
document.querySelector(".line").appendChild(i.cloneNode(true));
}
for(let o = 0;o<cW;o++){
document.querySelector(".top-chain>div").appendChild(i.cloneNode(true));
}
for(let o = 0;o<cW;o++){
document.querySelector(".bottom-chain>div").appendChild(i.cloneNode(true));
}
}
</script>
</body>
</html> 
网友评论文明上网理性发言 已有0人参与
发表评论: