纯CSS3打造自行车

前端  /  管理员 发布于 7年前   165

废话不想多说，我们直接上图和代码最实际。

我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦

a6d50f35b586894d7e10eb9e1fea2ae.png

怎么样，帅不帅呀，快来打造帅帅的自行车吧

代码如下，复制即可用，不过这是我的自行车，你们可不能盗取我的自行车哦

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>快来打造属于你们自己的自行车吧</title>        <style type="text/css">* {    margin: 0;    padding: 0}ol,ul {    list-style: none/*去掉圆点或数字*/}.cycle-outer {    width: 534px;    height: 260px;    position: absolute;    /*绝对定位*/    top: 50%;    /*距离顶部*/    margin: -160px 0 0 -267px;    /*距离外边距*/    left: 50%;}.cycle-wrapper {    width: 534px;    height: 260px;    margin: 0 auto;    position: relative;    /*相对定位*/}.cycle-wheel-front {    /*前轮*/    margin: 100px 0 0 330px;}.cycle-wheel-back {    /*后轮*/    margin: 100px 0 0 0px;}.cycle-wheel-outer {    background: transparent;    border: 5px solid #aaa;    border-radius: 50%;    /*画外轮圆圈*/    width: 190px;    height: 190px;    position: absolute;    margin-top: 5px;    animation: wheel-rotate 2s linear infinite;    /*定义动画*/}/*轮胎开始旋转*/@keyframes wheel-rotate {    from {        transform: rotate(0deg);    }    to {        transform: rotate(360deg);    }}.cycle-wheel-outer:after {    /*插入内轮胎圆圈*/    background: transparent;    border: 4px solid #EF9058;    border-radius: 50%;    width: 176px;    height: 176px;    position: absolute;    margin: 3px;    content: "";}.spoke {    /*开始画车轮线条*/    position: absolute;    width: 1px;    height: 200px;    background: #ccc;    margin: -5px 0 0 95px;    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-container li:nth-child(2) {    /*中心点旋转*/    transform: rotate(30deg);}.inner-disc {    /*画中心轴圆点*/    background: #666;    width: 20px;    height: 20px;    border-radius: 50%;    position: absolute;    left: 50%;    margin: -10px 0 0 -10px;    top: 50%;}.inner-disc-2 {    /*画轮胎中心轴的圆圈*/    background: transparent;    width: 6px;    height: 6px;    border: 2px solid #FFF;    border-radius: 50%;    position: absolute;    left: 50%;    margin: -5px 0 0 -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: -13px 0 0 -13px;    top: 50%;    border: 4px dotted #666;}.cycle-body {    margin-left: 125px;}.front-wheel-frame {/*前叉*/    background: #5E999B;    width: 8px;    height: 180px;    position: absolute;    z-index: 2;    transform: rotate(-25deg);    margin: -72px 0 0 260px;}.top-frame {/*上管*/    background: #5E999B;    width: 180px;    height: 8px;    position: absolute;    z-index: 2;    margin: -20px 0 0 62px;    transform: rotate(-8deg);}.front-frame {/*下管*/    background: #5E999B;    width: 8px;    height: 160px;    position: absolute;    z-index: 2;    transform: rotate(41deg);    margin: -36px 0 0 189px;}.center-frame { /*坐杆*/    background: #5E999B;    width: 8px;    height: 205px;    position: absolute;    z-index: 2;    transform: rotate(-33deg);    margin: -84px 0 0 75px;}.back-frame {/*后管*/    background: #5E999B;    width: 8px;    height: 136px;    position: absolute;    z-index: 2;    transform: rotate(39deg);    margin: -23px 0 0 19px;}.bottom-frame {/*后叉or平管*/    background: #5E999B;    width: 159px;    height: 8px;    position: absolute;    z-index: 2;    margin: 100px 0 0 -16px;}.handlebar-front {/*车把*/    width: 60px;    height: 8px;    background: #5E999B;    z-index: 2;    position: absolute;    margin: -68px 0 0 222px;    border-top-left-radius: 3px;    border-bottom-left-radius: 3px;}.handlebar-curve {/*车把手*/    width: 40px;    height: 40px;    border: 8px solid #666;    border-top-right-radius: 100%;    border-bottom-right-radius: 100%;    border-bottom-left-radius: 100%;    background: transparent;    position: absolute;    margin: -68px 0 0 258px;    border-left: 8px solid transparent;    border-top: 8px solid #666;    border-bottom: 8px solid #666;}/*座垫*/.seat {     width: 50px;    height: 10px;    background: #666;    border-radius: 44%;    position: absolute;    margin: -73px 0 0 15px;}.seat:after {    width: 0px;    height: 0px;    border-style: solid;    border-width: 0 40px 16px 40px;    border-color: transparent transparent #666 transparent;    content: "";    position: absolute;    z-index: 3;    transform: rotate(-12deg);    position: absolute;    border-radius: 100%;    margin: 0 0 0 -26px;}.seat:before {    width: 0px;    height: 0px;    border-style: solid;    border-width: 0 40px 16px 40px;    border-color: transparent transparent #666 transparent;    content: "";    position: absolute;    z-index: 3;    transform: rotate(179deg);    position: absolute;    border-radius: 100%;    margin: 0 0 0 -26px;}.seat span {    width: 32px;    height: 19px;    background: #666;    border-radius: 100%;    position: absolute;    margin: 1px 0 0 -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: 5px solid #666;    border-radius: 50%;    position: absolute;    margin: 87px 0 0 250px;    z-index: 3;    content: "";}/*牙盘*/.chain-rods {    height: 70px;    width: 6px;    background: #666;    position: absolute;    margin: 67px 0 0 263px;    z-index: 15;    animation: wheel-rotate 2s linear infinite;}.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: 5px solid #666;    position: absolute;    margin: 62px 0 0 226px;    z-index: 3;}.outer-axle:after {    content: "";    height: 74px;    width: 74px;    border-radius: 50%;    background: transparent;    border: 5px dotted #666;    margin: -7px;    position: absolute;    z-index: 3;    animation: wheel-rotate 2s linear infinite;}/*车链子*/.chain-up {    background-color: transparent;    background-size: 8px 2px;    background-position: 0 0, 30px 30px;    width: 155px;    height: 4px;    position: absolute;    z-index: 9;    background: #EEE;    transform: rotate(-11deg);    margin: 76px 0 0 98px;}.chain-up:before {    content: "";    background-color: transparent;    background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);    background-size: 8px 2px;    background-position: 0 0, 30px 30px;    width: 155px;    height: 4px;    animation: chainUp 2s linear infinite;    position: absolute;    z-index: 10;}.chain-bottom {    background-color: transparent;    background-size: 8px 2px;    background-position: 0 0, 30px 30px;    width: 155px;    height: 4px;    position: absolute;    z-index: 9;    background: #EEE;    -webkit-transform: rotate(9deg);    -moz-transform: rotate(9deg);    transform: rotate(9deg);    margin: 127px 0 0 98px;}.chain-bottom:before {    content: "";    background-color: transparent;    background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);    background-size: 8px 2px;    background-position: 0 0, 30px 30px;    width: 155px;    height: 4px;    animation: chainDown 2s linear infinite;    position: absolute;    z-index: 10;}/*脚踏*/.pedal-rod {    height: 120px;    width: 6px;    background: #666;    position: absolute;    margin: -25px 0 0 0px;}.pedal-rod:before {    width: 40px;    height: 10px;    background: #666;    position: absolute;    margin: 10px;    content: "";    margin: -7px -17px;    animation: pedal1 2s linear infinite;}.pedal-rod:after {    width: 40px;    height: 10px;    background: #666;    position: absolute;    margin: 10px;    content: "";    margin: 119px -17px;    animation: pedal2 2s linear infinite;}/*水壶架*/.bottle-holder {    width: 20px;    height: 36px;    background: #daeded;    border: 3px solid #5E999B;    position: absolute;    margin: 54px 0 0 -25px;}.bottle-holder:after {    width: 20px;    height: 3px;    content: "";    background: #5E999B;    position: absolute;    margin: 24px 0 0 0px;}/*水壶*/.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: 1px solid #98baba;    border-bottom: 0;}.bottle-holder span {    position: absolute;    width: 9px;    height: 4px;    background: #666;    margin: -17px 0 0 5px;}/*车链子动画*/@keyframes chainUp {    0% {        background-position: 0 25%;    }    100% {        background-position: 100% 0;    }}@keyframes chainDown {    0% {        background-position: 100% 0;    }    100% {        background-position: 0 25%;    }}/*脚踏动画*/@keyframes pedal1 {    0% {        transform: rotate(00deg);    }    25% {        transform: rotate(-140deg);    }    50% {        transform: rotate(-180deg);    }    75% {        transform: rotate(-240deg);    }    100% {        transform: rotate(-360deg);    }}@keyframes pedal2 {    0% {        transform: rotate(00deg);    }    25% {        transform: rotate(-60deg);    }    50% {        transform: rotate(-180deg);    }    75% {        transform: rotate(-340deg);    }    100% {        transform: rotate(-360deg);    }}        </style>    </head>    <body>        <div class="cycle-outer"><div class="cycle-wrapper">    <!--        描述：车架    -->    <div class="cycle-body">        <div class="seat"><span></span>        </div>        <div class="front-wheel-frame"></div>        <div class="top-frame"></div>        <div class="front-frame"><div class="bottle-holder">    <span></span></div>        </div>        <div class="center-frame"></div>        <div class="back-frame"></div>        <div class="bottom-frame"></div>        <div class="handlebar-front"></div>        <div class="handlebar-curve"></div>    </div>    <!--        描述：后轮    -->    <div class="cycle-wheel cycle-wheel-back">        <div class="cycle-wheel-outer"><div class="cycle-wheel-inner">    <div class="cycle-wheel-inner-padding">        <ul class="spoke-container"><li class="spoke"></li><li class="spoke"></li>        </ul>        <div class="inner-disc"></div>        <div class="inner-disc-2"></div>    </div></div>        </div>    </div>    <!--        描述：前轮    -->    <div class="cycle-wheel cycle-wheel-front">        <div class="cycle-wheel-outer"><div class="cycle-wheel-inner">    <div class="cycle-wheel-inner-padding">        <ul class="spoke-container"><li class="spoke"></li><li class="spoke"></li>        </ul>        <div class="inner-disc"></div>        <div class="inner-disc-2"></div>    </div></div>        </div>    </div>    <!--        描述：中心轴  车链子 牙盘 水壶架  水壶   脚踏    -->    <div class="chain-up"></div>    <div class="chain-bottom"></div>    <div class="chain-rotation">        <div class="outer-axle"></div>        <div class="chain-disc-outer"><div class="chain-disc-inner"></div>        </div>    </div>    <div class="chain-rods">        <div class="pedal-rod"></div>    </div></div>        </div>        <div style="text-align:center;clear:both;">    </body></html>

以上就是纯CSS3打造自行车的详细内容，更多请关注其它相关文章！


  • 上一条：
    css实现文字过长显示省略号
    下一条：
    如何改变css伪元素的样式

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客