当前位置： 煜阳网站建设 > 公司网站制作 > 前端 > CSS

纯CSS3打造自行车

2024-01-17 16:13 小编
   废话不想多说，我们直接上图和代码最实际。
    我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦
    a6d50f35b586894d7e10eb9e1fea2ae.png
    怎么样，帅不帅呀，快来打造帅帅的自行车吧
    代码如下，复制即可用，不过这是我的自行车，你们可不能盗取我的自行车哦
    <!DOCTYPEhtml>
    <html>
    <head>
    <metacharset="UTF-8">
    <title>快来打造属于你们自己的自行车吧</title>
    <styletype="text/css">
    *{
    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);
    }
    }
    </style>
    </head>
    <body>
    <divclass="cycle-outer">
    <divclass="cycle-wrapper">
    <!--
    描述：车架
    -->
    <divclass="cycle-body">
    <divclass="seat">
    <span></span>
    </div>
    <divclass="front-wheel-frame"></div>
    <divclass="top-frame"></div>
    <divclass="front-frame">
    <divclass="bottle-holder">
    <span></span>
    </div>
    </div>
    <divclass="center-frame"></div>
    <divclass="back-frame"></div>
    <divclass="bottom-frame"></div>
    <divclass="handlebar-front"></div>
    <divclass="handlebar-curve"></div>
    </div>
    <!--
    描述：后轮
    -->
    <divclass="cycle-wheelcycle-wheel-back">
    <divclass="cycle-wheel-outer">
    <divclass="cycle-wheel-inner">
    <divclass="cycle-wheel-inner-padding">
    <ulclass="spoke-container">
    <liclass="spoke"></li>
    <liclass="spoke"></li>
    </ul>
    <divclass="inner-disc"></div>
    <divclass="inner-disc-2"></div>
    </div>
    </div>
    </div>
    </div>
    <!--
    描述：前轮
    -->
    <divclass="cycle-wheelcycle-wheel-front">
    <divclass="cycle-wheel-outer">
    <divclass="cycle-wheel-inner">
    <divclass="cycle-wheel-inner-padding">
    <ulclass="spoke-container">
    <liclass="spoke"></li>
    <liclass="spoke"></li>
    </ul>
    <divclass="inner-disc"></div>
    <divclass="inner-disc-2"></div>
    </div>
    </div>
    </div>
    </div>
    <!--
    描述：中心轴车链子牙盘水壶架水壶脚踏
    -->
    <divclass="chain-up"></div>
    <divclass="chain-bottom"></div>
    <divclass="chain-rotation">
    <divclass="outer-axle"></div>
    <divclass="chain-disc-outer">
    <divclass="chain-disc-inner"></div>
    </div>
    </div>
    <divclass="chain-rods">
    <divclass="pedal-rod"></div>
    </div>
    </div>
    </div>
    <divstyle="text-align:center;clear:both;">
    </body>
    </html>


返回首页 下一篇：css实现文字过长显示省略号

猜你喜欢

热门话题：

优化方案 网页 搜狗 查找 建议 seo 哪里 选择 模板 服务 口碑 排名优化 分析 排名 论坛 翻译 行业 费用 报价 一年

联络方式：

13363039260

微信二维码
您感兴趣的内容
建设网站费用
公司网站制作
seo优化推广
托管服务
网站案例
网站模板
解决方案
地区
服务项目
建站
优化
维护
新闻资讯
公司动态
建站资讯
常见问题
关于我们
域名注册
虚拟主机
云服务器

加微信咨询

微信二维码
网站备案号：冀ICP备17016639号 Copyright © 2016-2025 邯郸市煜阳网络科技有限公司 版权所有
地址：河北省邯郸市丛台区赵都华润A座803室 电话：13363039260 QQ群1：522899734 QQ群2：542925463
本页内容由煜阳网络科技有限公司通过网络收集编辑所得，
所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中有涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，
工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。
在线咨询 拨打电话

客服QQ

电话

13363039260

微信二维码

微信二维码