From c00b34d98ae3e2cee7ad054f759edeb033479293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yann=20M=C3=B6lle?= Date: Wed, 17 May 2023 21:16:06 +0200 Subject: [PATCH] =?UTF-8?q?=E2=80=9Ecustom.css=E2=80=9C=20hinzuf=C3=BCgen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- custom.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 custom.css diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..4e56a4e --- /dev/null +++ b/custom.css @@ -0,0 +1,79 @@ +/* Animations */ + +.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} +.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} +.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} +.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} +.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important} + +/* Animate Zoom */ + +.animate-zoom-1 {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-2 {animation:animatezoom 0.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-3 {animation:animatezoom 0.7s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-4 {animation:animatezoom 0.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-5 {animation:animatezoom 1.1s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-6 {animation:animatezoom 1.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-7 {animation:animatezoom 1.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-8 {animation:animatezoom 1.7s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} +.animate-zoom-9 {animation:animatezoom 1.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} + +/* Animate Top */ + +.animate-top-1{position:relative;animation:animatetop 0.3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-2{position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-3{position:relative;animation:animatetop 0.7s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-4{position:relative;animation:animatetop 0.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-5{position:relative;animation:animatetop 1.1s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-6{position:relative;animation:animatetop 1.3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-7{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-8{position:relative;animation:animatetop 1.7s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} +.animate-top-9{position:relative;animation:animatetop 1.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} + +/* Animate Bottom */ + +.animate-bottom-1{position:relative;animation:animatebottom 0.3s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-2{position:relative;animation:animatebottom 0.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-3{position:relative;animation:animatebottom 0.7s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-4{position:relative;animation:animatebottom 0.9s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-5{position:relative;animation:animatebottom 1.1s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-6{position:relative;animation:animatebottom 1.3s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-7{position:relative;animation:animatebottom 1.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-8{position:relative;animation:animatebottom 1.7s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} +.animate-bottom-9{position:relative;animation:animatebottom 1.9s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} + +/* Zoom Box */ + +.zoom-box { + -webkit-transition: -webkit-transform 0.2s; + transition: -webkit-transform 0.2s; + transition: transform 0.2s; + transition: transform 0.2s, -webkit-transform 0.2s; +} + +.zoom-box:hover { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} + +/* Hide on phone */ + +@media (max-width: 576px) { + .element { + display: none; + } +} + + +/* Gradient Text */ + +.text-gradient { + background: linear-gradient(to right, rgba(22,91,189,1) 0%, rgba(144,30,254,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + display: inline-block; +} +