>  기사  >  웹 프론트엔드  >  순수 CSS3로 자전거 만들기

순수 CSS3로 자전거 만들기

藏色散人
藏色散人앞으로
2020-02-25 14:10:352207검색

더 이상 말도 안되는 말을 하고 싶지 않습니다. 가장 실용적인 버전의 사진과 코드로 바로 이동하겠습니다.

먼저 렌더링을 보시죠.

순수 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-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로 자전거 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제