快来一起实现属于自己的自行车吧！

Posted 2020-10-24 Foryourfuture
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快来一起实现属于自己的自行车吧！相关的知识，希望对你有一定的参考价值。
纯CSS3打造自行车
废话不想多说，我们直接上图和代码最实际。
我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦
怎么样，帅不帅呀，快来打造帅帅的自行车吧
代码如下，复制即可用，不过这是我的自行车，你们可不能盗取我的自行车哦
<!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-indexMyBatis进阶提升考试题，快来测测自己掌握的情况吧
 MyBatis进阶提升考试题，快来测测自己掌握的情况吧
 OpenCV-Python实战（18）——深度学习简介与入门示例（快来一起推开深度学习的大门吧）
 ipad壁纸快来拿走属于你的小幸运吧~~~
 OneFlow最新版本登陆矩池云，快来体验吧
 51CTO博客2.0新功能上线，快来跟我一起用一句话介绍自己