单个div+css实现老式雪花电视机效果代码-html代码-BFW代码库

单个div+css实现老式雪花电视机效果代码

代码语言：html

代码描述：单个div+css实现老式雪花电视机效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
.vintage {
  width: 300px;
  aspect-ratio: 1.4;
  box-sizing: border-box;
  border: 8px solid #3f3c2b;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 0 3px inset;
  background: linear-gradient(#625b55 0 0) left/78% 100% no-repeat content-box,#c2b5a1;
  display: flex;
  gap: 5px
}
.vintage::before,
.vintage::after {
  content:"";
}
.vintage::before {
  flex: 80%;
  border: 8px solid #33302f;
  border-color: #33302f #0000;
  border-radius: 45% / 24%;
  transform: scale(.92,.9);
  background: 
    radial-gradient(100% 85% at 100% 50%,#0000 80%,#33302f 0 90%,#625b55 0) -9% 50%/40% 100% no-repeat,
    radial-gradient(100% 85% at 0 50%,#0000 80%,#33302f 0 90%,#625b55 0) 109% 50%/40% 100% no-repeat,
    repeating-radial-gradient(#000 0 0.0001%,#ddd 0 0.00018%) 50% 50%/2500px 25.........完整代码请登录后点击上方下载按钮下载查看