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部分：

View Code

<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部分：

View Code

.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部分：

View Code

$(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日 每个人都有一个属于自己的童年，最难忘的是成长中的每一次跌倒，幸福快乐的每个瞬间以及曾经出现在身边的每个朋友。小朋友有小朋友的节日，成年人同样可以欢度六一。