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