body { padding:0; margin:0; width:100vw; height:100vh; background:radial-gradient(#35495e,black); } * { box-sizing:border-box; } .conent { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:.5s color infinite; } .box { width:200px; height:150px; border:3px solid #232020; } @keyframes color { 0% { box-shadow:0px 0px 30px #FFFFFF; } 100% { box-shadow:0px 0px 50px #BEEBE9; } }.TV { width:100px; height:18px; position:absolute; background-color:#232020; border-top:3px solid #dedef0; top:-18px; left:50px; border-top-left-radius:30px; border-top-right-radius:30px; } .TV::before { content:''; position:absolute; width:1px; height:60px; background-color:#88e1f2; top:-50px; transform:rotate(-30deg); z-index:-1; } .TV::after { content:''; position:absolute; width:1px; height:60px; background-color:#88e1f2; /* border-radius:100%; */ left:95px; top:-50px; transform:rotate(30deg); z-index:-1; } .TV_1 { position:absolute; width:10px; height:10px; background-color:green; border-radius:50%; top:-50px; left:-18px; animation:5s light infinite step-start; } .TV_1::before { content:''; position:absolute; width:10px; height:10px; background-color:green; border-radius:50%; left:123px; animation:5s light infinite step-start; } @keyframes light { 0{background-color:green; box-shadow:0 0 10px green; } 25% { background-color:yellow; box-shadow:0 0 10px yellow; } 50% { background-color:red; box-shadow:0 0 10px red; } 75% { background-color:blue; box-shadow:0 0 10px blue; } 100% { background-color:green; box-shadow:0 0 10px green; } }p { position:absolute; width:30px; height:10px; background-color:#232020; bottom:-25px; left:20px; } p::before { content:''; position:absolute; width:30px; height:10px; background-color:#232020; right:-130px; } p::after { content:''; position:absolute; width:80px; height:4px; border-radius:50%; top:5px; left:40px; background-color:#333333; opacity:.8; } span { position:absolute; width:120px; height:6px; background-color:black; top:135px; left:45px; border:2px solid white; } span::before { content:''; position:absolute; width:10px; height:10px; top:-5px; background-color:#FFFFFF; border:1px solid black; border-radius:50%; animation:1.5s remove infinite linear; } span::after { content:''; position:absolute; width:20px; height:10px; left:-15px; top:-5px; border-left:7px double white; } @keyframes remove { from { transform:translateX(0px); } to { transform:translateX(110px); } }.n { position:absolute; height:5px; width:0px; background-color:red; animation:1.5s name infinite linear; } @keyframes name { from { width:0px; } to { width:120px; } }
更新时间:2020-02-09 23:09:00