La diferencia entre el posicionamiento superior izquierdo y la transformación.
La diferencia más importante es la posición del elemento:
usar la posición superior izquierda cambia directamente la posición real del elemento.
Pero cuando usas transform: TranslateY(-5px), solo cambia la posición visual y la posición del elemento en sí sigue siendo 0px.
La segunda diferencia es la sintaxis de los dos posicionamientos en sí:
la transformación es relativamente más conveniente al realizar efectos, porque la perspectiva de la transformación es el elemento en sí, por lo que es más intuitivo. Por ejemplo, si desea que un elemento esté 50 px a la izquierda, eso es transformar: traducirX (-50 px), pero si usa izquierda y sus elementos padre e hijo están en posición: absoluta, entonces puede usar izquierda para escribir desde la izquierda. : 100px a la izquierda: 30px. Esto es muy poco intuitivo.
La diferencia final es la eficiencia:
dado que la transformación no cambia el diseño CSS, el comportamiento de renderizado se realiza principalmente en el elemento mismo, por lo que la eficiencia es mayor que la parte superior izquierda.
Métodos comunes de temporizador.
El método setInterval()
setInterval() ejecuta el código especificado continuamente durante el número especificado de milisegundos.
> window.setInterval("javascript function",milliseconds);
Método clearInterval()
Código de función utilizado para detener la ejecución del método setInterval().
myVar=setInterval("javascript function",milliseconds);
Método setTimeout()
El método setTimeout() establece un temporizador que ejecuta una función o un fragmento de código específico después de que expira el temporizador.
Método clearTimeout()
Código de función utilizado para detener la ejecución del método setTimeout().
La diferencia entre settimeout y setinterval
1. En las mismas condiciones, setTimeout() solo se ejecuta una vez y setInterval() se ejecuta en un bucle;
2.setTimeout() se retrasa una vez: setTimeout(fn, 1000);
//Delay durante 1 segundo, ejecutar una vez fn( );
3.setInterval() se ejecuta en un bucle a intervalos; setInterval(fn, 1000);
//Cada 1 segundo, ejecuta fn() en un bucle
Añade una máscara mientras escalas la imagen.
Grabación de pantalla QQ
configuración de estilo
.goal {
position: relative;
width: 771.49px;
height: 314px;
background-color: aqua;
display: inline-block;
overflow: hidden;
z-index: 10;
}
.goal::before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 8;
}
.goal img {
z-index: 7;
width: 771.49px;
height: 314px;
position: absolute;
transform: scale(1.0);
transition: all 0.6s;
}
.goal:hover img {
transform: scale(1.1);
cursor: pointer;
}
.goal:hover {
transform: translateY(-5px);
cursor: pointer;
}
.goalword {
position: absolute;
z-index: 9999;
}
Qué se debe lograr en esta parte:
- Mueva el mouse hacia adentro y todo el cuadro se mueve hacia arriba.
- Mueve el ratón y la imagen se ampliará.
- Siempre hay una máscara gris
Relación jerárquica: el nivel del texto debe ser el más alto, seguido del nivel de todo el cuadro, luego el nivel del color de la máscara y finalmente el nivel de la imagen.