纯CSS3打造自行车
导读：废话不想多说，我们直接上图和代码最实际。 我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦 a6d50f35b586894d7e10eb9e1fea2ae.png 怎么样，帅不帅呀，快来打造帅帅的自...
废话不想多说，我们直接上图和代码最实际。
我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦
a6d50f35b586894d7e10eb9e1fea2ae.png
怎么样，帅不帅呀，快来打造帅帅的自行车吧
代码如下，复制即可用，不过这是我的自行车，你们可不能盗取我的自行车哦
快来打造属于你们自己的自行车吧
*{
margin:0;
padding:0
}
ol,
ul{
list-style:none/*去掉圆点或数字*/
}
.cycle-outer{
width:534px;
height:260px;
position:absolute;
/*绝对定位*/
top:50%;
/*距离顶部*/
margin:-160px00-267px;
/*距离外边距*/
left:50%;
}
.cycle-wrapper{
width:534px;
height:260px;
margin:0auto;
position:relative;
/*相对定位*/
}
.cycle-wheel-front{
/*前轮*/
margin:100px00330px;
}
.cycle-wheel-back{
/*后轮*/
margin:100px000px;
}
.cycle-wheel-outer{
background:transparent;
border:5pxsolid#aaa;
border-radius:50%;
/*画外轮圆圈*/
width:190px;
height:190px;
position:absolute;
margin-top:5px;
animation:wheel-rotate2slinearinfinite;
/*定义动画*/
}
/*轮胎开始旋转*/
@keyframeswheel-rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.cycle-wheel-outer:after{
/*插入内轮胎圆圈*/
background:transparent;
border:4pxsolid#EF9058;
border-radius:50%;
width:176px;
height:176px;
position:absolute;
margin:3px;
content:"";
}
.spoke{
/*开始画车轮线条*/
position:absolute;
width:1px;
height:200px;
background:#ccc;
margin:-5px0095px;
z-index:0;
}
.spoke:after{
/*在后面插入两条*/
content:"";
position:absolute;
width:1px;
height:200px;
background:#ccc;
transform:rotate(120deg);
}
.spoke:before{
/*在前面插入两条*/
content:"";
position:absolute;
width:1px;
height:200px;
background:#ccc;
transform:rotate(240deg);
}
/*轮胎线条完成*/
.spoke-containerli:nth-child(2){
/*中心点旋转*/
transform:rotate(30deg);
}
.inner-disc{
/*画中心轴圆点*/
background:#666;
width:20px;
height:20px;
border-radius:50%;
position:absolute;
left:50%;
margin:-10px00-10px;
top:50%;
}
.inner-disc-2{
/*画轮胎中心轴的圆圈*/
background:transparent;
width:6px;
height:6px;
border:2pxsolid#FFF;
border-radius:50%;
position:absolute;
left:50%;
margin:-5px00-5px;
top:50%;
}
.cycle-wheel-back.inner-disc-2:after{
/*插入后轮轴心齿轮*/
content:"";
background:transparent;
width:18px;
height:18px;
border-radius:50%;
position:absolute;
left:50%;
margin:-13px00-13px;
top:50%;
border:4pxdotted#666;
}
.cycle-body{
margin-left:125px;
}
.front-wheel-frame{
/*前叉*/
background:#5E999B;
width:8px;
height:180px;
position:absolute;
z-index:2;
transform:rotate(-25deg);
margin:-72px00260px;
}
.top-frame{
/*上管*/
background:#5E999B;
width:180px;
height:8px;
position:absolute;
z-index:2;
margin:-20px0062px;
transform:rotate(-8deg);
}
.front-frame{
/*下管*/
background:#5E999B;
width:8px;
height:160px;
position:absolute;
z-index:2;
transform:rotate(41deg);
margin:-36px00189px;
}
.center-frame{
/*坐杆*/
background:#5E999B;
width:8px;
height:205px;
position:absolute;
z-index:2;
transform:rotate(-33deg);
margin:-84px0075px;
}
.back-frame{
/*后管*/
background:#5E999B;
width:8px;
height:136px;
position:absolute;
z-index:2;
transform:rotate(39deg);
margin:-23px0019px;
}
.bottom-frame{
/*后叉or平管*/
background:#5E999B;
width:159px;
height:8px;
position:absolute;
z-index:2;
margin:100px00-16px;
}
.handlebar-front{
/*车把*/
width:60px;
height:8px;
background:#5E999B;
z-index:2;
position:absolute;
margin:-68px00222px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.handlebar-curve{
/*车把手*/
width:40px;
height:40px;
border:8pxsolid#666;
border-top-right-radius:100%;
border-bottom-right-radius:100%;
border-bottom-left-radius:100%;
background:transparent;
position:absolute;
margin:-68px00258px;
border-left:8pxsolidtransparent;
border-top:8pxsolid#666;
border-bottom:8pxsolid#666;
}
/*座垫*/
.seat{
width:50px;
height:10px;
background:#666;
border-radius:44%;
position:absolute;
margin:-73px0015px;
}
.seat:after{
width:0px;
height:0px;
border-style:solid;
border-width:040px16px40px;
border-color:transparenttransparent#666transparent;
content:"";
position:absolute;
z-index:3;
transform:rotate(-12deg);
position:absolute;
border-radius:100%;
margin:000-26px;
}
.seat:before{
width:0px;
height:0px;
border-style:solid;
border-width:040px16px40px;
border-color:transparenttransparent#666transparent;
content:"";
position:absolute;
z-index:3;
transform:rotate(179deg);
position:absolute;
border-radius:100%;
margin:000-26px;
}
.seatspan{
width:32px;
height:19px;
background:#666;
border-radius:100%;
position:absolute;
margin:1px00-22px;
transform:rotate(-11deg);
}
/*去掉中心轴的*/
.chain-rotation{
position:absolute;
z-index:16;
}
/*中心轴*/
.chain-disc-inner{
background:#666;
width:18px;
height:18px;
border-radius:50%;
position:absolute;
margin:2px;
z-index:4;
}
.chain-disc-outer{
background:#FFF;
width:22px;
height:22px;
border:5pxsolid#666;
border-radius:50%;
position:absolute;
margin:87px00250px;
z-index:3;
content:"";
}
/*牙盘*/
.chain-rods{
height:70px;
width:6px;
background:#666;
position:absolute;
margin:67px00263px;
z-index:15;
animation:wheel-rotate2slinearinfinite;
}
.chain-rods:before{
content:"";
height:70px;
width:6px;
background:#666;
position:absolute;
transform:rotate(120deg);
}
.chain-rods:after{
content:"";
height:70px;
width:6px;
background:#666;
position:absolute;
transform:rotate(240deg);
-webkit-transform:rotate(240deg);
-moz-transform:rotate(240deg);
}
.outer-axle{
height:70px;
width:70px;
border-radius:50%;
background:transparent;
border:5pxsolid#666;
position:absolute;
margin:62px00226px;
z-index:3;
}
.outer-axle:after{
content:"";
height:74px;
width:74px;
border-radius:50%;
background:transparent;
border:5pxdotted#666;
margin:-7px;
position:absolute;
z-index:3;
animation:wheel-rotate2slinearinfinite;
}
/*车链子*/
.chain-up{
background-color:transparent;
background-size:8px2px;
background-position:00,30px30px;
width:155px;
height:4px;
position:absolute;
z-index:9;
background:#EEE;
transform:rotate(-11deg);
margin:76px0098px;
}
.chain-up:before{
content:"";
background-color:transparent;
background-image:linear-gradient(90deg,#66625%,transparent25%,transparent75%,#66675%,#666);
background-size:8px2px;
background-position:00,30px30px;
width:155px;
height:4px;
animation:chainUp2slinearinfinite;
position:absolute;
z-index:10;
}
.chain-bottom{
background-color:transparent;
background-size:8px2px;
background-position:00,30px30px;
width:155px;
height:4px;
position:absolute;
z-index:9;
background:#EEE;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
transform:rotate(9deg);
margin:127px0098px;
}
.chain-bottom:before{
content:"";
background-color:transparent;
background-image:linear-gradient(90deg,#66625%,transparent25%,transparent75%,#66675%,#666);
background-size:8px2px;
background-position:00,30px30px;
width:155px;
height:4px;
animation:chainDown2slinearinfinite;
position:absolute;
z-index:10;
}
/*脚踏*/
.pedal-rod{
height:120px;
width:6px;
background:#666;
position:absolute;
margin:-25px000px;
}
.pedal-rod:before{
width:40px;
height:10px;
background:#666;
position:absolute;
margin:10px;
content:"";
margin:-7px-17px;
animation:pedal12slinearinfinite;
}
.pedal-rod:after{
width:40px;
height:10px;
background:#666;
position:absolute;
margin:10px;
content:"";
margin:119px-17px;
animation:pedal22slinearinfinite;
}
/*水壶架*/
.bottle-holder{
width:20px;
height:36px;
background:#daeded;
border:3pxsolid#5E999B;
position:absolute;
margin:54px00-25px;
}
.bottle-holder:after{
width:20px;
height:3px;
content:"";
background:#5E999B;
position:absolute;
margin:24px000px;
}
/*水壶*/
.bottle-holder:before{
background-color:#daeded;
width:18px;
height:10px;
border-radius:30%/100%;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
content:"";
position:absolute;
margin-top:-13px;
border:1pxsolid#98baba;
border-bottom:0;
}
.bottle-holderspan{
position:absolute;
width:9px;
height:4px;
background:#666;
margin:-17px005px;
}
/*车链子动画*/
@keyframeschainUp{
0%{
background-position:025%;
}
100%{
background-position:100%0;
}
}
@keyframeschainDown{
0%{
background-position:100%0;
}
100%{
background-position:025%;
}
}
/*脚踏动画*/
@keyframespedal1{
0%{
transform:rotate(00deg);
}
25%{
transform:rotate(-140deg);
}
50%{
transform:rotate(-180deg);
}
75%{
transform:rotate(-240deg);
}
100%{
transform:rotate(-360deg);
}
}
@keyframespedal2{
0%{
transform:rotate(00deg);
}
25%{
transform:rotate(-60deg);
}
50%{
transform:rotate(-180deg);
}
75%{
transform:rotate(-340deg);
}
100%{
transform:rotate(-360deg);
}
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 纯CSS3打造自行车
本文地址： https://pptw.com/jishu/664725.html