From 4a566f9dacbafcb939f99784e0bec2bac69a0c7c Mon Sep 17 00:00:00 2001 From: nicobogado12 Date: Wed, 3 Aug 2022 13:38:27 -0300 Subject: [PATCH] subiendo proyecto de background efecto movimiento --- index.html | 15 +++++++++++++++ style.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..949c835 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + + Animacion Background + + +
+

Animacion Background

+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..cf3b220 --- /dev/null +++ b/style.css @@ -0,0 +1,50 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,700&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html{ + font-size: 10px; + font-family: 'Lato', sans-serif; +} + +section{ + width: 100%; + height: 100vh; + color: #fff; + background: linear-gradient(-45deg, #EE7752, #E73C7E,#23A6D5,#23D5AB ); + background-size: 400%, 400%; + position: relative; + animation: efectoMover 10s ease-in-out infinite; +} + + +h1{ + font-size: 4rem; + font-weight: 300; + text-transform: uppercase; + letter-spacing: 2x; + border: 3px solid #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 5rem 10rem; +} + + +@keyframes efectoMover{ + 0%{ + background-position: 0 50%; + } + 50%{ + background-position: 100% 50%; + } + 100%{ + background-position: 0 50%; + } + +} \ No newline at end of file