純CSS如何實(shí)現(xiàn)紅綠燈效果

這篇文章主要介紹純CSS如何實(shí)現(xiàn)紅綠燈效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司始終致力于在企業(yè)網(wǎng)站建設(shè)領(lǐng)域發(fā)展。秉承“創(chuàng)新、求實(shí)、誠(chéng)信、拼搏”的企業(yè)精神，致力為企業(yè)提供全面的網(wǎng)絡(luò)宣傳與技術(shù)應(yīng)用整體策劃方案，為企業(yè)提供包括“網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、微信網(wǎng)站建設(shè)、微信小程序定制開(kāi)發(fā)、商城建設(shè)、平臺(tái)網(wǎng)站建設(shè)秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、下面的代碼輸出的內(nèi)容是什么？

function O(name){
    this.name=name||'world';
}
O.prototype.hello=function(){
    return function(){
        console.log('hello '+this.name)
    }
}
var o=new O;
var hello=o.hello();
hello();

分析：

1、O類(lèi)實(shí)例化的時(shí)候賦值了一個(gè)屬性name，默認(rèn)值為world，那么在實(shí)例化的時(shí)候并未給值，所以name屬性為world

2、O類(lèi)有一個(gè)原型方法hello，該方法其實(shí)是一個(gè)高階函數(shù)，返回一個(gè)低階函數(shù)，精髓就在這個(gè)低階函數(shù)中的this，

注意這里的低階函數(shù)其實(shí)是在window環(huán)境中運(yùn)行，所以this應(yīng)該指向的是window

所以我的答案是：'hello undefined'（但這個(gè)答案是錯(cuò)誤的，哈哈）

圈套：殊不知原生window是有name屬性的，默認(rèn)值為空

所以正確答案應(yīng)該是：hello

2、給你一個(gè)div，用純css寫(xiě)出一個(gè)紅綠燈效果，按照紅黃綠順序依次循環(huán)點(diǎn)亮（無(wú)限循環(huán)）

當(dāng)時(shí)沒(méi)寫(xiě)出來(lái)，現(xiàn)場(chǎng)手寫(xiě)這么多代碼是有難度的，下面是我后面實(shí)現(xiàn)代碼(省略了瀏覽器兼容性前綴)

<div id="lamp"></div>
/*
思路：
    總共三個(gè)燈，分別紅黃綠，要一個(gè)一個(gè)按順序點(diǎn)亮，我們可以這樣暫定一個(gè)循環(huán)需要10秒中，每盞燈點(diǎn)亮3秒，
    那么在keyframes中對(duì)應(yīng)寫(xiě)法就如下所示（紅燈點(diǎn)亮?xí)r間為10%--40%，黃燈點(diǎn)亮?xí)r間為40%--70%，綠燈點(diǎn)亮?xí)r間為70%--100%）
*/
@keyframes redLamp{
    0%{background-color: #999;}
    9.9%{background-color: #999;}
    10%{background-color: red;}
    40%{background-color: red;}
    40.1%{background-color: #999;}
    100%{background-color: #999;}
}
@keyframes yellowLamp{
    0%{background-color: #999;}
    39.9%{background-color: #999;}
    40%{background-color: yellow;}
    70%{background-color: yellow;}
    70.1%{background-color: #999;}
    100%{background-color: #999;}
}
@keyframes greenLamp{
    0%{background-color: #999;}
    69.9%{background-color: #999;}
    70%{background-color: green;}
    100%{background-color: green;}
}
#lamp,#lamp:before,#lamp:after{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #999;
    position: relative;
}
#lamp{
    left: 100px;
    animation: yellowLamp 10s ease infinite;
}
#lamp:before{
    display: block;
    content: '';
    left: -100px;
    animation: redLamp 10s ease infinite;
}
#lamp:after{
    display: block;
    content: '';
    left: 100px;
    top: -100px;
    animation: greenLamp 10s ease infinite;
}

以上是“純CSS如何實(shí)現(xiàn)紅綠燈效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：純CSS如何實(shí)現(xiàn)紅綠燈效果
網(wǎng)站鏈接：http://muchs.cn/article36/pieesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容