diff options
| author | Wojtek Kosior <wk@koszkonutek-tmp.pl.eu.org> | 2021-05-26 18:17:35 +0200 |
|---|---|---|
| committer | Wojtek Kosior <wk@koszkonutek-tmp.pl.eu.org> | 2021-05-26 18:17:35 +0200 |
| commit | f02cc055fb9306798e449bc7028e46e6f232d475 (patch) | |
| tree | 5096273ceeea454e3c9ecd971d48869735468061 /index.html | |
| download | mothers-day-css-animation-f02cc055fb9306798e449bc7028e46e6f232d475.tar.gz mothers-day-css-animation-f02cc055fb9306798e449bc7028e46e6f232d475.zip | |
initial commit
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..56ab5f2 --- /dev/null +++ b/index.html @@ -0,0 +1,197 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<!-- + Copyright Wojtek Kosior 2021 + + This file and accompanying svg images are available under the terms of CC0. + See: https://koszko.org/cc0-license.txt + --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> + <meta http-equiv="Content-Security-Policy" content="script-src"/> + <title>Dzień mamy</title> + <style type="text/css"> + body>* { + position: fixed; + } + + body>* * { + position: relative; + } + + .tulip { + height: 50vh; + width: auto; + top: 25vh; + left: 50vw; + transform:translateX(-50%); + } + + .grass { + bottom: 0; + width: 100%; + height: 35%; + } + + .text { + bottom: 2vh; + left: 50vw; + transform:translateX(-50%); + animation: pulsating-text 3s infinite ease; + } + + @keyframes pulsating-text { + 0%, 60%, 100% { + height: 35vh; + width: 91vw; + } + 80% { + height: 38vh; + width: 95vw; + } + } + + .sun-container { + animation: sun-container 7s infinite ease-in; + } + + .sun { + animation: sun 7s infinite ease-in; + height: 10vh; + } + + @keyframes sun-container { + 100%, 0% { + left: 25vw; + } + 40% { + left: 25vw; + animation-timing-function: ease-out; + } + 50% { + left: -25vw; + } + 90% { + left: 125vw; + animation-timing-function: ease-in; + } + } + + @keyframes sun { + 0%, 100% { + top: 5vh; + } + 40% { + top: 5vh; + animation-timing-function: ease-in; + } + 50% { + top: 50vh; + } + 51% { + top: 100vh; + } + 89% { + top: 100vh; + } + 90% { + top: 50vh; + animation-timing-function: ease-out; + } + } + + .moon-container { + animation: moon-container 7s infinite ease-in; + } + + .moon { + animation: moon 7s infinite ease-in; + height: 10vh; + } + + @keyframes moon-container { + 100%, 0% { + left: -25vw; + } + 40% { + left: 125vw; + animation-timing-function: ease-in; + } + 50% { + left: 25vw; + } + 90% { + left: 25vw; + animation-timing-function: ease-out; + } + } + + @keyframes moon { + 0%, 100% { + top: 50vh; + } + 1% { + top: 100vh; + } + 39% { + top: 100vh; + } + 40% { + top: 50vh; + animation-timing-function: ease-out; + } + 50% { + top: 5vh; + } + 90% { + top: 5vh; + animation-timing-function: ease-in; + } + } + + body, html { + margin: 0; + width: 100vw; + height: 100vh; + } + + body { + animation: sky 7s infinite ease; + } + + @keyframes sky { + 100%, 0%, 40% { + background-color: #adf; + } + 50%, 90% { + background-color: #44c; + } + } + + .darkness { + animation: darkness 7s infinite ease; + background-color: black; + width: 100vw; + height: 100vh; + } + + @keyframes darkness { + 100%, 0%, 40% { + opacity: 0; + } + 50%, 90% { + opacity: 0.4; + } + } + </style> + </head> + <body> + <img src="mm/grass.svg" class="grass" alt="grass image"></img> + <img src="mm/tulip.svg" class="tulip" alt="tulip image"></img> + <div class="darkness"></div> + <div class="sun-container"><img class="sun" src="mm/sun.svg" alt="sun image"></img></div> + <div class="moon-container"><img class="moon" src="mm/moon.svg" alt="moon image"></img></div> + <img class="text" src="mm/text.svg" alt="Wszystkiego najlepszego z okazji Dnia Mamy"></img> + </body> +</html> |