The difference between top left positioning and transform
The most important difference is the position of the element:
using top left positioning directly changes the real position of the element.
But when you use transform: translateY(-5px), it only changes the visual position, and the element itself is still at 0px.
The second difference is the syntax of the two positioning itself:
transform is relatively more convenient when making effects, because the perspective of transform is the element itself, so it is more intuitive. For example, if you want an element to be 50px to the left, that is transform: translateX(-50px), but if you use left and your parent and child elements are position: absolute, then you may use left to write from left: 100px to left: 30px, This is very unintuitive.
The final difference is efficiency:
since transform does not change the css layout, the rendering behavior is mostly on the element itself, so the efficiency is higher than top left.
Common methods of timer
The setInterval() method
setInterval() executes the specified code continuously for the specified number of milliseconds.
> window.setInterval("javascript function",milliseconds);
clearInterval() method
Function code used to stop the execution of the setInterval() method.
myVar=setInterval("javascript function",milliseconds);
setTimeout() method
The setTimeout() method sets a timer that executes a function or a specified piece of code after the timer expires.
clearTimeout() method
Function code used to stop execution of the setTimeout() method.
The difference between settimeout and setinterval
1. Under the same conditions, setTimeout() is only executed once, and setInterval() is executed in a loop;
2.setTimeout() is delayed once: setTimeout(fn, 1000);
//Delay for 1 second, execute once fn( );
3.setInterval() executes in a loop at intervals; setInterval(fn, 1000);
//Every 1 second, executes fn() in a loop
Add a mask while zooming the image
QQ screen recording
Style settings
.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;
}
The effect that needs to be achieved in this part:
- Move the mouse in, the whole box moves up
- Mouse over, picture zooms in
- There is always a gray mask.
Hierarchical relationship: the text level needs to be the highest, followed by the level of the entire box, then the level of the mask color, and finally the level of the image.