efecto:
Proceso de producción:
1. Defina la etiqueta, la etiqueta a es el botón y los 4 tramos son los bordes azules de las cuatro acciones alrededor del botón. :
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
2. Defina el estilo básico del botón .night:
.night{
position: relative;
width: 300px;
height: 100px;
color: rgb(18, 190, 243);
letter-spacing: 12px;
font-size: 50px;
line-height: 100px;
text-align: center;
/* background-color: rgb(31, 49, 133); */
background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
text-transform: uppercase;
user-select: none;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235);
transition: all 0.5s;
}
position: Posicionamiento relativo.
espaciado entre letras: espaciado entre palabras.
degradado lineal: color degradado.
text-transform: todas las letras están en mayúsculas.
user-select: el texto no se puede seleccionar.
decoración de texto: Elimina el subrayado predeterminado.
desbordamiento: desbordamiento oculto.
box-shadow: sombra.
transición: efecto de transición.
3. Cambios de estilo del mouse sobre el botón:
.night:hover{
text-shadow: 0 0 5px rgb(18, 190, 243),
0 0 8px rgb(18, 190, 243),
0 0 10px rgb(18, 190, 243);
background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235),
0 0 10px rgb(9, 208, 235);
}
text-shadow: sombra de texto.
lineear-gradient: cambio de color del degradado.
box-shadow: La sombra del cuadro cambia.
4. El estilo básico de 4 tramos:
.night span{
position: absolute;
}
posicionamiento absoluto absoluto
5. Defina el estilo de la línea de movimiento azul sobre el botón:
.night span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
animation: move1 2s linear infinite;
}
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
degradado lineal: color degradado. transparente es un color transparente.
animación: configura una animación para hacer que la línea azul se mueva.
transform: translateX (-100%); El desplazamiento en el eje X es -100%.
transform: translateX (100%); Deje que cambie al 100%.
6. Por analogía, los otros tres también configuran animaciones y luego configuran el retardo de animación para los de izquierda y derecha. :
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}
animation-delay: 1s; Configura la demora de la animación para que se reproduzca durante 1 segundo.
Código completo:
<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(4, 4, 19);
}
.night{
position: relative;
width: 300px;
height: 100px;
color: rgb(18, 190, 243);
letter-spacing: 12px;
font-size: 50px;
line-height: 100px;
text-align: center;
/* background-color: rgb(31, 49, 133); */
background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
text-transform: uppercase;
user-select: none;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235);
transition: all 0.5s;
}
.night:hover{
text-shadow: 0 0 5px rgb(18, 190, 243),
0 0 8px rgb(18, 190, 243),
0 0 10px rgb(18, 190, 243);
background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235),
0 0 10px rgb(9, 208, 235);
}
.night span{
position: absolute;
}
.night span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
animation: move1 2s linear infinite;
}
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
</body>
</html>
para resumir:
Si crees que es bueno, simplemente así ~
Olvidé decirlo. Después de
una comida, finalmente pasé la tercera clase ~
Otros artículos:
Texto de streamer colorido html + css
burbuja fondo flotante efecto especial html + css
reloj simple efecto especial html + css + js
botón de estilo cyberpunk html + css
imitando NetEase cloud sitio web oficial imagen de carrusel html + css + js
onda de agua cargando animación html + css
barra de navegación desplazamiento efecto degradado html + css + js
página del libro girando html + css
álbum estéreo 3D html + css
efecto de tablero de dibujo de neón html + css + js
recordar algún resumen de atributos CSS (1)
Notas de resumen de Sass
... etc.