CSS绘制的PAL制式电视测试图形

传统的PAL制式电视测试图案，就是以前电视台没节目时一直显示的那个噢

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1230
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* For thin horizontal lines on sides */
/* For white grid */

body {
    margin: 0;
    overflow-x: hidden;
}
.container {
    background-color: #7a7a7a;
    position: relative;
    width: 100vw;
    height: 75vw;
}
/* Thin horizontal lines on sides */

.linesL,
.linesR {
    background-repeat: no-repeat;
    background-size: 100% 87.5%;
    position: absolute;
    top: 0;
    height: 100%;
    width: 9%;
}
.linesL {
    background-image: repeating-linear-gradient(#b85a7a, #b85a7a 0.35%, #3c9a7a 0.35%, #3c9a7a 0.7%);
    background-position: 0% 50%;
    left: 0;
}
.linesR {
    background-image: repeating-linear-gradient(#7a64e9, #7a64e9 0.35%, #7a900b 0.35%, #7a900b 0.7%);
    background-position: 100% 50%;
    right: 0;
}
.screen {
    background-image: repeating-linear-gradient(#fff, #fff 0.4%, transparent 0.4%, transparent 7.3%), repeating-linear-gradient(90deg, #fff, #fff 0.52%, transparent 0.52%, transparent 5.47%);
    background-repeat: no-repeat;
    background-position: 3.2vw 1.8vw;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    position: relative;
    width: 100vw;
    height: 75vw;
}
.circle {
    background: #fff;
    border-radius: 50%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    -webkit-flex-direction: column;
    -webkit-justify-content: flex-end;
    -webkit-align-items: center;
    overflow: hidden;
    position: relative;
    width: 65.625vw;
    height: 65.625vw;
}
/* Borders */

.border-h {
    background-image: repeating-linear-gradient(90deg, #000, #000 4.94%, #fff 4.94%, #fff 10.92%);
    background-position: -7.3vw 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.4%;
}
.border-v {
    background-image: repeating-linear-gradient(#fff, #fff 2.4%, #000 2.4%, #000 10.2%, #fff 10.2%, #fff 14.55%);
    position: absolute;
    top: 0;
    width: 3.3%;
    height: 100%;
}
.top {
    top: 0;
}
.bottom {
    bottom: 0;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
/* 6 rectangles, 8 colors; tallest ones are gradients */

.rect {
    position: absolute;
}
.teal-pink {
    background-image: linear-gradient(#22987c, #22987c 50%, #bf5979 50%, #bf5979);
    left: 9.1%;
    top: 10.1%;
    width: 5.05%;
    height: 79.95%;
}
.ltblueL {
    background: #4380d2;
    left: 14.1%;
    top: 10.1%;
    width: 5.5%;
    height: 14.3%;
}
.ltblueR {
    background: #4380d2;
    right: 14.4%;
    top: 10.1%;
    width: 5.3%;
    height: 14.3%;
}
.brownL {
    background: #a3772a;
    left: 14.1%;
    bottom: 9.95%;
    width: 5.5%;
    height: 14.3%;
}
.brownR {
    background: #a3772a;
    right: 14.4%;
    bottom: 10%;
    width: 5.3%;
    height: 14.23%;
}
.olive-periwinkle {
    background-image: linear-gradient(#7b8d25, #7b8d25 50%, #716ee4 50%, #716ee4);
    right: 9.3%;
    top: 10.1%;
    width: 5.1%;
    height: 79.95%;
}
/* Shapes inside circle */

.row-1 {
    background-color: #000;
    width: 33%;
    height: 8.33%;
}
.row-2 {
    background-image: linear-gradient(90deg, #000, #000 25%, #fff 25%, 28.75%, #000 28.75%, #000 30%, #fff 30%, #fff 75%, #000 75%, #000);
    height: 8.33%;
    width: 100%;
}
.row-3 {
    background-image: repeating-linear-gradient(90deg, #000, #000 5.75%, #999 5.75%, #999 11.5%);
    background-position: 2.55vw 0;
    height: 8.33%;
    width: 100%;
}
.row-4 {
    background-image: linear-gradient(90deg, #c4bb2f, #c4bb2f 16.66%, #00c0c0 16.6%, #00c0c0 33.3%, #00bd2e 33.3%, #00bd2e 50%, #c521ba 50%, #c521ba 66.6%, #ca0004 66.6%, #ca0004 83.3%, #002aba 83.3%, #002aba);
    height: 16.66%;
    width: 100%;
}
.row-5 {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 4%, #fff 4%, #fff 4.75%, transparent 4.75%, transparent 8.3%), linear-gradient(#000, #000 47%, #fff 47%, #fff 53%, #000 53%, #000);
    height: 8.33%;
    width: 100%;
}
.row-5 div {
    background-image: linear-gradient(90deg, transparent, transparent 46%, #fff 46%, #fff 54%, transparent 54%, transparent), linear-gradient(#000, #000 49%, #fff 49%, #fff 51%, #000 51%, #000);
    position: absolute;
    left: 46.25%;
    top: 37.5%;
    width: 7.5%;
    height: 25%;
}
.row-6 {
    background-image: linear-gradient(90deg, #000, #000 7%, #fff 9%, #000 11%, #fff 13%, #000 15%, #fff 17%, #000 19%, #fff 21%, #000 23%, #fff 25%, #000 26%, #fff 26.75%, #000 27.5%, #fff 28.25%, #000 29%, #fff 29.75%, #000 30.5%, #fff 31.25%, #000 32%, #fff 32.75%, #000 33.5%, #fff 34.25%, #000 35%, #fff 35.75%, #000 36.5%, #fff 37.25%, #000 38%, #fff 38.75%, #000 39.5%, #fff 40.25%, #000 41%, #fff 41.5%, #000 42%, #fff 42.5%, #000 43%, #fff 43.5%, #000 44%, #fff 44.5%, #000 45%, #fff 45.5%, #000 46%, #fff 46.5%, #000 47%, #fff 47.5%, #000 48%, #fff 48.5%, #000 49%, #fff 49.5%, #000 50%, #fff 50.5%, #000 51%, #fff 51.5%, #000 52%, #fff 52.5%, #000 53%, #fff 53.5%, #000 54%, #fff 54.5%, #000 55%, #fff 55.5%, #000 56%, #fff 56.5%, #000 57%, #fff 57.33%, #000 57.66%, #fff 58%, #000 58.33%, #fff 58.66%, #000 59%, #fff 59.33%, #000 59.66%, #fff 60%, #000 60.33%, #fff 60.66%, #000 61%, #fff 61.33%, #000 61.66%, #fff 62%, #000 62.33%, #fff 62.66%, #000 63%, #fff 63.33%, #000 63.66%, #fff 64%, #000 64.33%, #fff 64.66%, #000 65%, #fff 65.33%, #000 65.66%, #fff 66%, #000 66.33%, #fff 66.66%, #000 67%, #fff 67.33%, #000 67.66%, #fff 68%, #000 68.33%, #fff 68.66%, #000 69%, #fff 69.33%, #000 69.66%, #fff 70%, #000 70.33%, #fff 70.66%, #000 71%, #fff 71.33%, #000 71.66%, #fff 72%, #000 72.33%, #fff 72.66%, #000 73%, #fff 73.33%, #000 73.66%, #fff 74%, #000 74.33%, #fff 74.66%, #000 75%, #fff 75.25%, #000 75.5%, #fff 75.75%, #000 76%, #fff 76.25%, #000 76.5%, #fff 76.75%, #000 77%, #fff 77.25%, #000 77.5%, #fff 77.75%, #000 78%, #fff 78.25%, #000 78.5%, #fff 78.75%, #000 79%, #fff 79.25%, #000 79.5%, #fff 79.75%, #000 80%, #fff 80.25%, #000 80.5%, #fff 80.75%, #000 81%, #fff 81.25%, #000 81.5%, #fff 81.75%, #000 82%, #fff 82.25%, #000 82.5%, #fff 82.75%, #000 83%, #fff 83.25%, #000 83.5%, #fff 83.75%, #000 84%, #fff 84.25%, #000 84.5%, #fff 84.75%, #000 85%, #fff 85.25%, #000 85.5%, #fff 85.75%, #000 86%, #fff 86.25%, #000 86.5%, #fff 86.75%, #000 87%, #fff 87.25%, #000 87.5%, #fff 87.75%, #000 88%, #fff 88.25%, #000 88.5%, #fff 88.75%, #000 89%, #fff 89.25%, #000 89.5%, #fff 89.75%, #000 90%, #fff 90.25%, #000 90.5%, #fff 90.75%, #000 91%, #fff 91.25%, #000 91.5%, #fff 91.75%, #000 92%);
    width: 100%;
    height: 16.66%;
}
.row-7 {
    background-image: linear-gradient(90deg, #000, #000 16.66%, #333 16.6%, #333 33.3%, #666 33.3%, #666 50%, #999 50%, #999 66.6%, #ccc 66.6%, #ccc 83.3%, #fff 83.3%, #fff);
    height: 8.33%;
    width: 100%;
}
.row-8 {
    background-image: linear-gradient(90deg, #000, #000 8.5%, #fff 8.5%, #fff 10%, #000 10%, #000);
    height: 8.33%;
    width: 50%;
}
.row-9 {
    background-image: linear-gradient(90deg, #c4bb2f, #c4bb2f 46.25%, #ca0004 46.25%, #ca0004 53.75%, #c4bb2f 53.75%, #c4bb2f);
    width: 100%;
    height: 12.5%;
}

HTML

传统的PAL制式电视测试图案，就是以前电视台没节目时一直显示的那个噢

CSS3

编辑器支持Emmet

快捷键

传统的PAL制式电视测试图案，就是以前电视台没节目时一直显示的那个噢

CSS3

纯CSS做的DNA式蓝六边形螺旋

CSS3 播放音符式的LOADING动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：