CSS3助力《Bus Run》演繹綠色低碳出行

記得有部影片叫《Chicken Run》，講述了小雞們不滿足於被奴役的現狀，通過自己的聰明才智，最終逃離雞場的故事。但是，這和下面的內容有什么關系呢，扯這干嘛？就算是借鑒下名稱吧，咱就命名個《Bus Run》，不廢話了，進入主題：

 

 

先看下效果，如果感覺有價值再往下看。Demo預覽

 

 

 

講到css3的border-radius這個玩意，可以很好玩。比如：圓角矩形，圓，橢圓等等。

CSS3 border-radius是什么？

border-radius的含義是：圓角。

CSS3 border-radius的書寫格式：

border-radius:apx，比較常見，其中a表示數值，下同；

-webkit-border-top-left-radius:apx，類似這種的寫法還是很實用的，但一定要記住順序，一句話：先寫Y軸，再寫X軸。

注意：上訴的-webkit-是兼容webkit內核的寫法，-moz-內核的寫法有所不同，如：-moz-border-radius-topleft:apx

下面我們通過幾個實例演示說明border-radius的用法：

CSS3 border-radius 圓角矩形：

.demo01{
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

CSS3 border-radius 圓角矩形2：

.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}

CSS3 border-radius 圓：

.demo03{
height:300px;
line-height:300px;
-webkit-border-radius:300px;
-moz-border-radius:300px;
}

CSS3 border-radius 漂亮圓角：

.demo04{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
}

CSS3 border-radius 橢圓：

.demo05{
height:300px;
-webkit-border-radius:180px;
-webkit-transform:rotatex(60deg);
}

能做的事情很多，更多技巧靠你發掘啦！

下面就把我自己做的腦殘級的Demo與大家分享下。

如看后感覺夠腦殘，請批斗；如看后感覺不夠腦殘，請批斗；如變得腦殘了，請撥110！

言歸正傳，看代碼：

下面的Demo中用到了jQuery定時器（jQuery Timer插件）以及jQuery效果中創建自定義動畫的函數animate()

HTML部分：

<div class="Road">
        <div class="Bus">
            <div class="Roof"></div>
            <div class="TopWindows"></div>
            <div class="SideMirror"></div>
            <div class="Windows RearWindows"></div>
            <div class="Doors Backdoor">
                <div class="Glass"></div>
                <div class="Crevices"></div>
                <div class="Glass"></div>
            </div>
            <div class="Windows MiddleWindows"></div>
            <div class="Doors">
                <div class="Glass"></div>
            </div>
            <div class="FrontWindshield"></div>
            <div class="Light"></div>
            <div class="Wheel"></div>
            <div class="Wheel FrontWheel"></div>
            <div class="Light Headlight"></div>
        </div>
        <div class="TrafficLights">
            <div class="Lightbox">
                <div id="Redlight" class="Redlight"></div>
                <div id="Yellowlight" class="unYellowlight"></div>
                <div id="Greenlight" class="unGreenlight"></div>
            </div>
            <div class="Lamppost">
                <div class="GreenButton"></div>
            </div>
        </div>
    </div>

CSS部分：

.Road{width:750px; height:100%; border-bottom:5px solid #039; float:left}
.Bus{width:250px; height:130px; border:3px solid #009245; background-color:#009245; border-radius:5px; z-index:0; float:left; position:absolute}
.Bus div{position:absolute}
        
.Bus .Roof{margin:0; width:250px; height:12px}
.Bus .TopWindows{margin-left:0; margin-top:12px; width:250px; height:22px; background-color:#F1F1F1}
        
.Bus .FrontWindshield{margin-left:253px; margin-top:10px; width:3px; height:65px; border-radius:5px; background-color:#EDEDED; z-index:1}
.Bus .SideMirror{margin-left:245px; margin-top:45px; width:12px; height:25px; border-radius:5px; border:1px solid #fff; background-color:#009245; z-index:2}
        
.Bus .Doors{margin-left:218px;width:30px;  margin-top:49px; height:80px; border-radius:2px; border:1px solid #301813; border-bottom:3px solid #301813}
.Bus .Doors .Glass{width:24px; height:37px; margin:3px; background-color:#F1F1F1}
.Bus .Backdoor{margin-left:80px; width:50px}
.Bus .Backdoor div{float:left; position:relative}
.Bus .Backdoor .Glass{width:18px; height:37px}
.Bus .Backdoor .Crevices{width:2px; height:80px; background-color:#301813}
        
.Bus .Windows{margin-top:53px; height:37px; background-color:#F1F1F1}
.Bus .MiddleWindows{margin-left:135px; width:80px;}
.Bus .RearWindows{margin-left:2px; width:75px}
        
.Bus .Wheel{margin-left:20px; margin-top:110px; width:20px; height:20px; border-radius:20px; border:10px solid #484748; background-color:#c3c3c3}
.Bus .FrontWheel{margin-left:160px}
        
.Bus .Light{margin-left:-3px; width:3px; margin-top:115px; height:10px; border-radius:1px; background-color:#BE0000}
.Bus .Headlight{margin-left:251px; width:2px}
        
.TrafficLights{ width:39px; height:250px; float:right}
.TrafficLights .Lightbox{width:35px; height:95px; background-color:#010101; border:2px solid #a0a0a0; border-radius:14px}
.TrafficLights .Lightbox div{margin:5px; width:25px; height:25px; border-radius:25px; cursor:pointer}
.TrafficLights .Lightbox .Redlight{background-color:#fc020e}
.TrafficLights .Lightbox .unRedlight{background-color:#590006}
.TrafficLights .Lightbox .Yellowlight{background-color:#ffd31a}
.TrafficLights .Lightbox .unYellowlight{background-color:#584b07}
.TrafficLights .Lightbox .Greenlight{background-color:#7bfe03}
.TrafficLights .Lightbox .unGreenlight{background-color:#2c5a00}
.TrafficLights .Lamppost{ width:10px; height:151px; margin:0 auto; background-color:#A9A9A9}
.TrafficLights .Lamppost .GreenButton{margin-top:95px; margin-left:2px; width:5px; height:5px; border-radius:5px; background-color:#2c5a00; position:absolute; cursor:pointer}

.Time{ width:150px; height:30px; line-height:30px; text-align:center; margin:0 auto 35px auto; border:2px solid #f1f1f1; border-radius:5px; font-family:Microsoft Sans Serif; font-size:18px; font-weight:bold}

Javascript部分：

$(document).ready(function () {
    var bus = $('.Bus');
    var time = 0;
    var speed = 50;
    var left = 50;
    var roadW = $('.Road').width();
    var busW = bus.width();

    SwithLight('Greenlight');
    BusMoving();

    function BusMoving() {
        bus.everyTime('1s', 'Run', function () {
            left += speed;
            bus.animate({ left: left + 'px' }, "fast");
            if ((left + busW) >= roadW) {
                left = 50;
            }
            time++;
            switch (time) {
                case 8: Yellowlight(); break;
                case 10: Redlight(); break;
                case 20: Greenlight(); break;
            }
            $('.Time').html(time);
        });
    }

    function BusStop() {
        bus.stopTime();
    }

    function Yellowlight() {
        SwithLight('Yellowlight'); speed = 30;
    }

    function Redlight() {
        SwithLight('Redlight'); speed = 0;
    }

    function Greenlight() {
        SwithLight('Greenlight'); speed = 50; time = 0;
    }

    function SwithLight(light) {
        $("div[id$='light']").each(function () {
            obj = $(this);
            if (obj.attr('id') == light) {
                obj.removeAttr('class').addClass(light);
            }
            else {
                obj.removeAttr('class').addClass('un' + obj.attr('id'));
            }
        });
    }
});

 

Demo下載

 

為了我們共有的家園，為了讓我們的下一代，下下一代，下下下一代，還能看到書本上描述的一樣看到天空是藍色的。呼吁大家多乘公交少開車，綠色低碳出行從我做起！

6月1日 每個人都有一個屬於自己的童年，最難忘的是成長中的每一次跌倒，幸福快樂的每個瞬間以及曾經出現在身邊的每個朋友。小朋友有小朋友的節日，成年人同樣可以歡度六一。