Aquí compartiré con ustedes algunos de los conocimientos que he resumido en Internet, espero que les sea de ayuda a todos.
prefacio
Hoy compartiremos una interfaz de inicio de sesión muy interesante, que está hecha con HTML y CSS, y tiene un efecto de onda de agua dinámica, que hace que los usuarios se sientan geniales al iniciar sesión.
marco html básico
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="water.css">
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="main">
<form>
<p>用户名<br />
<input type="text" class="textinput" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" class="textinput" placeholder="请输入密码" />
</p>
<p>
<input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
</p>
<p>
<input type="submit" value="登录" />
</p>
<p class="txt">还没有账户?<a href="#">注册</a></p>
</form>
</div>
</body>
</html>
Primero, veamos el código HTML. Esta pantalla de inicio de sesión consiste en un formulario en el que el usuario debe ingresar un nombre de usuario y una contraseña. Usamos la etiqueta p para crear el cuadro de entrada y establecer el atributo de clase para la configuración de estilo CSS posterior. Además, agregamos una casilla de verificación "recordar contraseña" y un botón de inicio de sesión al formulario, junto con un enlace para registrarse.
estilo de formulario
form{
opacity: 0.8;
text-align: center;
padding: 0px 100px;
border-radius: 10px;
margin: 120px auto;
}
p {
-webkit-text-stroke: 1px #8e87c3;
}
Defina el estilo del formulario como un todo para que esté ubicado dentro de la gota de agua y p
el texto de la etiqueta esté hueco.
.textinput{
height: 40px;
font-size: 15px;
width: 100px;
padding: 0 35px;
border: none;
background: rgba(250, 249, 249, 0.532);
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
border-radius: 50px;
-webkit-text-stroke: 0px;
color: saddlebrown;
outline-style: none;
}
Defina el estilo del cuadro de entrada, cancele el estilo de fuente hueca, cancele el contorno y configure la sombra para lograr el efecto general de las gotas de agua.
input[type="submit"]{
width: 110px;
height: 40px;
text-align: center;
outline-style: none;
border-style: none;
border-radius: 50px;
background: rgb(31, 209, 218);
-webkit-text-stroke: 0px;
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
Utilizamos el selector de entrada[tipo="enviar"] para seleccionar el botón de enviar y establecer el tamaño del botón, la alineación del texto, las esquinas redondeadas y los estilos de fondo para eliminar el contorno. La sombra también se usa para configurar el botón para darle una sensación de burbuja y para configurar el color de fondo.
input[type="submit"]:hover {
background-color: rgb(31, 218, 78);
}
Este código se usa para agregar un efecto de mouseover al botón. Usamos el selector input[type="submit"]:hover para seleccionar el estado del botón cuando el mouse está sobre él y establecer el color de fondo. Cuando el usuario pasa el cursor sobre el botón, el color de fondo del botón cambia, lo que es muy llamativo.
a {
text-decoration: none;
color: rgba(236, 20, 20, 0.433);
-webkit-text-stroke: 1px;
}
a:hover {
text-decoration: underline;
}
El estilo de texto registrado en la parte inferior del botón de envío adopta un estilo de fuente hueca y se agrega un subrayado cuando el mouse se mueve sobre el elemento.
* {
margin: 0;
padding: 0;
}
body {
background: skyblue;
}
Este código es para borrar los márgenes exterior e interior de todos los elementos para controlar mejor la posición y el tamaño de los elementos, y establecer el color de fondo de toda la página en azul cielo.
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
box-sizing: border-box;
border-radius: 50%;
background: transparent;
box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
animation: move 6s linear infinite;
}
.main::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
background: rgba(254, 254, 254, 0.667);
left: 80px;
top: 80px;
border-radius: 50%;
animation: move2 6s linear infinite;
filter:blur(1px);
}
.main::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
left: 130px;
top: 70px;
border-radius: 50%;
animation: move3 6s linear infinite;
filter:blur(1px);
}
@keyframes move {
50% {
border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
}
75% {
border-radius: 52% 48% 49% 51% / 43% 49% 51% 57% ;
}
25% {
border-radius: 52% 48% 59% 41% / 43% 49% 51% 57% ;
}
}
@keyframes move2 {
25% {
left: 80px;
top: 110px;
}
50% {
left: 50px;
top: 80px;
}
75% {
left: 80px;
top: 120px;
}
}
@keyframes move3 {
25% {
left: 100px;
top: 90px;
}
50% {
left: 110px;
top: 75px;
}
75% {
left: 130px;
top: 100px;
}
}
总代码
HTML部分
<div class="main">
<form>
<p>用户名<br />
<input type="text" class="textinput" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" class="textinput" placeholder="请输入密码" />
</p>
<p>
<input id="remember" type="checkbox" /><label for="remember">记住密码</label>
</p>
<p>
<input type="submit" value="登录" />
</p>
<p class="txt">还没有账户?<a href="#">注册</a></p>
</form>
</div>
CSS部分
* {
margin: 0;
padding: 0;
}
body {
background: skyblue;
}
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
box-sizing: border-box;
border-radius: 50%;
background: transparent;
box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
animation: move 6s linear infinite;
}
.main::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
background: rgba(254, 254, 254, 0.667);
left: 80px;
top: 80px;
border-radius: 50%;
animation: move2 6s linear infinite;
filter:blur(1px);
}
.main::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
left: 130px;
top: 70px;
border-radius: 50%;
animation: move3 6s linear infinite;
filter:blur(1px);
}
@keyframes move {
50% {
border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
}
75% {
border-radius: 52% 48% 49% 51% / 43% 49% 51% 57% ;
}
25% {
border-radius: 52% 48% 59% 41% / 43% 49% 51% 57% ;
}
}
@keyframes move2 {
25% {
left: 80px;
top: 110px;
}
50% {
left: 50px;
top: 80px;
}
75% {
left: 80px;
top: 120px;
}
}
@keyframes move3 {
25% {
left: 100px;
top: 90px;
}
50% {
left: 110px;
top: 75px;
}
75% {
left: 130px;
top: 100px;
}
}
form{
opacity: 0.8;
text-align: center;
padding: 0px 100px;
border-radius: 10px;
margin: 120px auto;
}
p {
-webkit-text-stroke: 1px #8e87c3;
}
.textinput{
height: 40px;
font-size: 15px;
width: 100px;
padding: 0 35px;
border: none;
background: rgba(250, 249, 249, 0.532);
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
border-radius: 50px;
-webkit-text-stroke: 0px;
color: saddlebrown;
outline-style: none;
}
input[type="submit"]{
width: 110px;
height: 40px;
text-align: center;
outline-style: none;
border-style: none;
border-radius: 50px;
background: rgb(31, 209, 218);
-webkit-text-stroke: 0px;
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
input[type="submit"]:hover {
background-color: rgb(31, 218, 78);
}
a {
text-decoration: none;
color: rgba(236, 20, 20, 0.433);
-webkit-text-stroke: 1px;
}
a:hover {
text-decoration: underline;
}