scanline exchange

This commit is contained in:
Patrick Tschuchnig 2020-01-25 15:21:12 +01:00
parent f1415fedaa
commit 1a9a99d3bc
2 changed files with 15 additions and 6 deletions

View File

@ -1,3 +1,7 @@
---
layout: none
---
/* /*
CRT effect in CSS by: CRT effect in CSS by:
http://aleclownes.com/2017/02/01/crt-display.html http://aleclownes.com/2017/02/01/crt-display.html
@ -147,21 +151,26 @@ http://aleclownes.com/2017/02/01/crt-display.html
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
animation: flicker 3s infinite; /*animation: flicker 3s infinite;*/
} }
.crt::before { .crt::before {
content: " "; /*content: " ";
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;*/
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); /*background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));*/
z-index: 2; z-index: 2;
background-size: 100% 2px, 3px 100%; /*background-size: 100% 2px, 3px 100%;*/
pointer-events: none; pointer-events: none;
background-image: url({{site.baseurl}}/assets/images/scanline.png);
background-repeat: repeat;
width:200px;
height:200px;
} }
.crt { .crt {
animation: textShadow 5s infinite; /*animation: textShadow 5s infinite;*/
} }

BIN
assets/images/scanline.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 B