Html
    Css
    Js

    
                        
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;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css电视动画动画

更新时间:2020-02-09 23:09:00

0