css布局实现老式复古黑白电视机效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现老式复古黑白电视机效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: "Heading Pro";
src: url(//repo.bfw.wiki/bfwrepo/font/heading-pro.woff) format("woff");
font-display: swap;
}
:root {
--television-width: 430px;
--television-height: 420px;
--television-bgcolor: #b71a11;
--television-bgcolor-dark: #88110b;
--antenna-gradient: linear-gradient(to top, #444 10%, #999 25% 40%, #444 70%, #2224 90%);
}
body {
margin: 0;
background: #ff1313;
background-image: radial-gradient(#fe5858, #fe1010);
}
.container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 4em;
}
.tv {
width: var(--television-width);
height: var(--television-height);
display: flex;
flex-direction: column;
align-items: center;
}
.tv .antenna-container {
width: 235px;
height: 85px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.tv .antenna-container .antenna {
width: 100%;
height: 4px;
background: var(--antenna-gradient);
transform-origin: 100% 50%;
transform: rotate(20deg) translateY(3px);
z-index: 0;
display: flex;
align-items: center;
}
.tv .antenna-container .antenna::before {
content: "";
display: block;
width: 8px;
height: 10px;
background: var(--antenna-gradient);
border-radius: 24% 53% 53% 24% / 36% 40% 40% 36%;
border: 1px solid #444;
border-left: 0;
border-bottom: 0;
transform: translateY(-1px);
}
.tv .television-container {
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
}
.tv .television-container .television {
width: 425px;
height: 300px;
border-radius: 35px / 45px;
box-shadow:
2px 2px 5px #0004,
2px -2px 2px darkred inset,
2px 1px 1px #fff inset,
0 0 3px 5px #0002;
background: var(--television-bgcolor);
background: linear-gradient(var(--television-bgcolor), var(--television-bgcolor-dark));
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.tv .television-container .television .television-inner {
width: 93%;
height: 90%;
background: linear-gradient(to bottom, #454c45 5%, #232522 35% 45%);
border-bottom: 1px solid #fff;
box-shadow: 0 1px 2px #470404 inset;
border-radius: 25px / 25px;
position: relative;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 0.8fr;
align-content: center;
gap: 3px;
}
.tv .television-container .television .television-inner .television-screen-container {
border: 1px solid #222;
box-shadow:
0 2px 2px #888,
2px 0 2px #444,
-2px 0 2px #444,
0 -2px 2px #111;
border-radius: 35px / 25px;
margin: 10px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background:
linear-gradient(70deg, #555 15%, transparent 30%),
repeating-conic-gradient(#222 0 30deg, #333 60deg, #222 90deg);
}
.tv .television-container .television .television-inner .television-screen-container .television-crt {
width: 99%;
height: 95%;
background: #111;
box-shadow:
0 0 5px 2px #111,
0 0 10px 2px #1112;
border-radius: 85px 85px 85px 85px / 100px 100px 100px 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen {
background: #302d30;
width: 95%;
height: 95%;
border-radius: 30%;
box-shadow: 0 0 5px 2px #111 inset;
overflow: hidden;
position: relative;
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .noise {
width: 100%;
height: 100%;
background:
linear-gradient(to bottom, transparent, #aaa4, #8881, #6664, #4445, #2228, #4443, transparent),
repeating-linear-gradient(transparent 0 2px, #25242950 2px 4px);
-webkit-animation: moveBand 8s linear infinite;
animation: moveBand 8s linear infinite;
z-index: 4;
position: relative;
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .off {
width: 100%;
height: 100%;
background: radial-gradient(#222, #1a1a1a, #111);
z-index: 5;
position: absolute;
top: 0;
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container .logo {
background: #f34b59;
width: 45px;
height: 32px;
border-radius: 8px;
margin-right: 5px;
display: grid;
place-items: center;
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container .logo .play {
width: 15px;
height: 15px;
background: #fff;
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tv .television-container .television .television-inner .television-screen-container .television-crt .television-screen .logo-container .text {
font-family: "Heading Pro", sans-serif;
font-size: 42px;
color: white;
letter-spacing: -1px;
}
.tv .television-container .television .television-inner .television-lateral {
display: grid;
grid-template-rows: 1.1fr 1fr;
gap: 12px;
margin: 15px;
margin-left: 0;
}
.tv .television-container .television .television-inner .television-lateral .dial-container {
border: 2px solid #333;
border-left: 1px solid #444;
border-bottom: 2px solid #444;
border-radius: 5px;
box-shadow:
-2px 2px 6px #111 inset,
-1px 2px 3px #aaa;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
align-items: center;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial {
width: 42px;
height: 42px;
border: 2px solid #6e706f;
border-radius: 50%;
box-shadow:
-4px 2px 4px #111,
0 0 1px 2px #000;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: -webkit-grab;
cursor: grab;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data {
color: #888;
font-size: 6px;
text-shadow: 0 0 2px #888;
position: absolute;
top: 0;
height: 100%;
transform-origin: 50% 50%;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(2) { transform: rotate(30deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(3) { transform: rotate(60deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(4) { transform: rotate(90deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(5) { transform: rotate(120deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(6) { transform: rotate(150deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(7) { transform: rotate(180deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(8) { transform: rotate(210deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(9) { transform: rotate(240deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(10) { transform: rotate(270deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(11) { transform: rotate(300deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .data-container .data:nth-child(12) { transform: rotate(330deg); }
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .dial-core {
width: 28px;
height: 28px;
border-radius: 50%;
background: conic-gradient(#eee 0deg 45deg, #666 70deg 285deg, #eee 320deg);
position: absolute;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial .selector {
position: absolute;
width: 75%;
background: linear-gradient(#666 30%, #aaa 40%);
height: 4px;
border: 1px solid #666;
border-radius: 4px / 8px;
transform: rotate(calc(var(--value) - 90deg));
transition: transform 0.25s linear;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial.channel-button {
background: #000;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial.volume-button {
background: #ccc;
}
.tv .television-container .television .television-inner .television-lateral .dial-container .dial.volume-button .data {
color: #444;
}
.tv .television-container .television .television-inner .television-lateral .speaker-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px 0;
margin-bottom: 12px;
margin-left: 2px;
margin-right: 2px;
}
.tv .television-container .television .television-inner .television-lateral .speaker-container div {
width: 10px;
height: 10px;
background: radial-gradient(#000, #222);
border-radius: 50%;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0