Úprava souboru index.html
This commit is contained in:
janrippl
parent
b6d18d642a
commit
0707e8621a
3 changed files with 110 additions and 69 deletions
BIN
alien3.png
Normal file
BIN
alien3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
|
|
@ -12,7 +12,7 @@
|
||||||
<link href="style.css" rel="stylesheet" type="text/css" />
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="content">
|
<div class="content light-rays">
|
||||||
|
|
||||||
<div class="marquee">
|
<div class="marquee">
|
||||||
<div class="marquee_blur" aria-hidden="true">
|
<div class="marquee_blur" aria-hidden="true">
|
||||||
|
|
@ -24,6 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text">
|
<p class="text">
|
||||||
|
<img align="left" width="50%" src="alien3.png" style="padding-top: 0.4rem; padding-right: 2rem;">
|
||||||
I wanted to make a Gooey Marquee type effect, tried a couple of things, and ended up using two layers of text, one with the effect, and a clean one on top so that the text remains readable.
|
I wanted to make a Gooey Marquee type effect, tried a couple of things, and ended up using two layers of text, one with the effect, and a clean one on top so that the text remains readable.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
142
style.css
142
style.css
|
|
@ -1,9 +1,7 @@
|
||||||
/*-----------------------------------------------------------------------------------*/
|
|
||||||
/* GENERAL STYLING
|
|
||||||
/*-----------------------------------------------------------------------------------*/
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
|
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
|
||||||
|
*,
|
||||||
*, *::before, *::after {
|
*::before,
|
||||||
|
*::after {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -19,7 +17,7 @@ body {
|
||||||
.content {
|
.content {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
max-width: 40ch;
|
max-width: 40ch;
|
||||||
padding: 3em 1em;
|
padding: 0em 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee {
|
.marquee {
|
||||||
|
|
@ -30,74 +28,116 @@ body {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
}
|
||||||
&_text {
|
.marquee_text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
-webkit-animation: marquee 16s infinite linear;
|
||||||
animation: marquee 16s infinite linear;
|
animation: marquee 16s infinite linear;
|
||||||
|
}
|
||||||
@keyframes marquee {
|
@-webkit-keyframes marquee {
|
||||||
from { translate: 70%; }
|
from {
|
||||||
to { translate: -70%; }
|
translate: 70%;
|
||||||
}
|
}
|
||||||
|
to {
|
||||||
|
translate: -70%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&_blur {
|
@keyframes marquee {
|
||||||
|
from {
|
||||||
|
translate: 70%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
translate: -70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.marquee_blur {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
background-image:
|
background-image: linear-gradient(to right, white, 1rem, transparent 50%), linear-gradient(to left, white, 1rem, transparent 50%);
|
||||||
linear-gradient(to right, white, 1rem, transparent 50%),
|
|
||||||
linear-gradient(to left, white, 1rem, transparent 50%);
|
|
||||||
filter: contrast(15);
|
filter: contrast(15);
|
||||||
|
}
|
||||||
p {
|
.marquee_blur p {
|
||||||
filter: blur(0.07em);
|
filter: blur(0.07em);
|
||||||
}
|
}
|
||||||
}
|
.marquee_clear {
|
||||||
|
|
||||||
&_clear {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
margin-block: 2em;
|
margin-block: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* -- paprsky -- */
|
||||||
|
@keyframes rotate {
|
||||||
|
to {
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-rays {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(#fff, black);
|
||||||
|
overflow: hidden;
|
||||||
|
--a: rgba(3, 10, 0, 0.1);
|
||||||
|
--b: rgba(3, 10, 0, 1);
|
||||||
|
--c: rgba(3, 10, 0, 0.5);
|
||||||
|
--d: rgba(3, 10, 0, 0.68);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-rays:before,
|
||||||
|
.light-rays:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -100vmax;
|
||||||
|
width: 200vmax;
|
||||||
|
height: 200vmax;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:before {
|
||||||
|
background: conic-gradient(
|
||||||
|
var(--a),
|
||||||
|
var(--b),
|
||||||
|
var(--c),
|
||||||
|
var(--d),
|
||||||
|
var(--a),
|
||||||
|
var(--d),
|
||||||
|
var(--a),
|
||||||
|
var(--d),
|
||||||
|
var(--b),
|
||||||
|
var(--c),
|
||||||
|
var(--d),
|
||||||
|
var(--a),
|
||||||
|
var(--b)
|
||||||
|
);
|
||||||
|
animation: rotate 4s infinite;
|
||||||
|
}
|
||||||
|
div:after {
|
||||||
|
background: conic-gradient(
|
||||||
|
var(--c),
|
||||||
|
transparent,
|
||||||
|
var(--c),
|
||||||
|
var(--a),
|
||||||
|
transparent,
|
||||||
|
var(--b),
|
||||||
|
var(--c),
|
||||||
|
transparent,
|
||||||
|
var(--c),
|
||||||
|
var(--a)
|
||||||
|
);
|
||||||
|
animation: rotate 2s 4s infinite reverse;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue