Requisito previo:
- HTML básico Aprender HTML
- css Aprender css
- Deberá tener un conocimiento básico de Keyframes con css Learn Keyframes
En este artículo, estamos creando la animación de fondo usando CSS. El formulario de inicio de sesión se utiliza como demostración y la intención principal es diseñar una animación de fondo.
Código HTML: En esta sección, diseñaremos la estructura básica del cuerpo.
<!DOCTYPE html> <html> <head> <title> Create Animated Background using CSS3 </title> </head> <body> <div class="container"> <input id="enter" type="textbox" placeholder="USERNAME"> <input id="enter" type="password" placeholder="PASSWORD"> <button id="submit" type="button" > <span id="span">SUBMIT</span> </button> <br> <div id="forget"> <a href="">Create Account</a> <a href="">Forget Password?</a> </div> </div> </body> </html>
Código CSS: en esta sección, estamos usando algunas propiedades CSS para diseñar la animación de fondo. Estamos usando el método linear-gradient() y la propiedad de animación para diseñar el fondo.
<style>
body
{
display:flex;
justify-content: center;
align-items: center;
background-image:linear-gradient(155deg,
white, violet, blue, lightblue);
background-size:450%;
animation:bganimation 15s infinite;
}
input
{
margin-bottom: 16px;
outline:none;
}
.container
{
background-image:radial-gradient(orange, tomato);
height:300px;
width:350px;
border:black 1.5px solid;
border-radius: 5%;
/*box-shadow: 8px 8px 50px black; */
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
#submit
{
outline:none;
color:black;
height:31px;
width:90px;;
border-radius:20px;
border-style:none;
background-color:yellow;
font-weight:550;
}
#submit:hover
{
transition:1s;
font-weight:550;
background-color:red;
border:2px solid yellow;
color:white;
}
#enter
{
color:black;
height:32px;
width:250px;
text-align: center;
font-size: small;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
border-style:none;
background-color:yellow;
}
#enter:hover
{
transition:0.4s;
background-color:pink;
}
img[alt="www.000webhost.com"]
{
display:none;
}
a
{
font-weight:500;
font-family:monospace;
font-size:105%;
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
}
a:first-child
{
margin-right: 28px;
}
@keyframes bganimation
{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}
</style>
Combinación de código: en esta sección, combinaremos código HTML y CSS para crear una animación de fondo.
<!DOCTYPE html>
<html>
<head>
<title>
Create Animated Background
using CSS3
</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(155deg,
white, violet, blue, lightblue);
background-size: 450%;
animation: bganimation 15s infinite;
}
input {
margin-bottom: 16px;
outline: none;
}
.container {
background-image: radial-gradient(orange, tomato);
height: 300px;
width: 350px;
border: black 1.5px solid;
border-radius: 5%;
/*box-shadow: 8px 8px 50px black; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#submit {
outline: none;
color: black;
height: 31px;
width: 90px;
;
border-radius: 20px;
border-style: none;
background-color: yellow;
font-weight: 550;
}
#submit:hover {
transition: 1s;
font-weight: 550;
background-color: red;
border: 2px solid yellow;
color: white;
}
#enter {
color: black;
height: 32px;
width: 250px;
text-align: center;
font-size: small;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-style: none;
background-color: yellow;
}
#enter:hover {
transition: 0.4s;
background-color: pink;
}
img[alt="www.000webhost.com"] {
display: none;
}
a {
font-weight: 500;
font-family: monospace;
font-size: 105%;
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
a:first-child {
margin-right: 28px;
}
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="container">
<input id="enter" type="textbox"
placeholder="USERNAME">
<input id="enter" type="password"
placeholder="PASSWORD">
<button id="submit" type="button">
<span id="span">SUBMIT</span>
</button>
<br>
<div id="forget">
<a href="">Create Account</a>
<a href="">Forget Password?</a>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por helloajaysingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA