neko/portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

effect only in the center

Browse Source
This commit is contained in:
Patrick Tschuchnig 2020-01-25 15:48:36 +01:00
parent 912b3c28c9
commit ad038d6221
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/crt-screen.css
View File

@ -24,15 +24,16 @@ layout: none
/* padding-right: 50px; */ /* padding-right: 50px; */
height: 480px; height: 480px;
width: 640px; width: 640px;
overflow: scroll; overflow-y: auto;
overflow-x: auto;
} }
.screen-content::before{ .screen-content::before{
z-index: 2; /* z-index: 2;
pointer-events: none; pointer-events: none;
background-image: url({{site.baseurl}}/assets/images/scanline.png); background-image: url({{site.baseurl}}/assets/images/scanline.png);
background-repeat: repeat; background-repeat: repeat;
width:200px; width:200px;
height:200px; height:200px;*/
} }

20
assets/css/crt.css
View File

@ -143,26 +143,30 @@ http://aleclownes.com/2017/02/01/crt-display.html
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: auto;
left: 0; left: auto;
bottom: 0; bottom: auto;
right: 0; right: auto;
background: rgba(18, 16, 16, 0.1); background: rgba(18, 16, 16, 0.1);
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
animation: flicker 3s infinite; animation: flicker 3s infinite;
width: 640px;
height: 480px;
} }
.crt::before { .crt::before {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: auto;
left: 0; left: auto;
bottom: 0; bottom: auto;
right: 0; right: auto;
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));
background-size: 100% 2px, 3px 100%; background-size: 100% 2px, 3px 100%;
width: 640px;
height: 480px;
} }
.crt { .crt {
animation: textShadow 5s infinite; animation: textShadow 5s infinite;