在线电视html5,HTML5电视机开关动画

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Righteous');

body {

width: 50%;

margin: auto;

margin-top: 25px;

background: #e7e0a3;

}

p {

margin-left: 20px;

margin-top: 120px;

font-size: 2em;

color: yellow;

text-transform: uppercase;

}

.flx {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

display: -webkit-flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.tv {

position: fixed;

width: 575px;

height: 380px;

padding-bottom: 20px;

background: #282430;

border: 2px solid #000;

}

.tv:before {

content: '';

position: absolute;

display: block;

height: 30px;

width: 50px;

top: 100%;

left: 50%;

margin-left: -25px;

background-color: #000;

box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 1);

}

.tv:after {

content: '';

position: absolute;

display: block;

border-bottom: 12px solid #000;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

height: 0;

width: 180px;

top: 100%;

left: 50%;

margin-left: -100px;

margin-top: 30px;

}

.name {

position: absolute;

left: 72px;

top: 5px;

width: 80px;

height: 10px;

}

.name:after {

content: "TWAIN TV";

font-size: 12px;

font-family: 'Righteous', cursive;

color: white;

}

.switch {

position: absolute;

left: 475px;

top: 365px;

width: 30px;

height: 30px;

}

button {

width: 15px;

height: 15px;

background: #ff0000;

border-radius: 50%;

}

.wrapper {

width: 420px;

height: 320px;

background: black;

color: yellow;

border: 7px inset #464646;

border-radius: 10px;

}

.smallunit {

background: black;

float: left;

width: 10px;

height: 10px;

}

.unit {

float: left;

width: 60px;

height: 100px;

}

.unit2 {

float: left;

width: 60px;

height: 40px;

}

.unit3 {

float: left;

width: 70px;

height: 40px;

}

.unitlong {

float: left;

width: 300px;

height: 40px;

background: #000;

color: #fff;

font-family: Arial;

font-size: 32px;

line-height: 40px;

text-align: center;

}

.unitlong:after {

content: "PLEASE STAND BY";

}

.gry {

background: #CCCCCC;

}

.yel {

background: #FFFF01;

}

.cya {

background: #08F8FF;

}

.lim {

background: #09F804;

}

.grn {

background: #OOFF00;

}

.pnk {

background: #F707FE;

}

.red {

background: #F10402;

}

.blu {

background: #0100FE;

}

.blk {

background: black;

}

.whi {

background: white;

}

.gry1 {

background: #404040;

}

.gry2 {

background: #505050;

}

.gry3 {

background: #606060;

}

.gry4 {

background: #707070;

}

.gry5 {

background: #808080;

}

.gry6 {

background: #A0A0A0;

}

.gry7 {

background: #C0C0C0;

}