腾讯网页制作遇到的问题

top left定位与transform的区别

最首要的区别是元素位置：
使用 top left 定位是直接改变元素真实位置的。
但是你用 transform: translateY(-5px) 只是改变了视觉位置，元素本身位置还是在 0px。
其次的区别是这两种定位本身的语法：
做效果的时候 transform 相对来说是比较方便的，因为 transform 的视角是元素本身，所以比较直观。比如你希望一个元素向左 50px 那就是 transform: translateX(-50px)，但是如果用 left 而你的父子元素都是 position: absolute，那可能你用 left 就要写成从 left: 100px 到 left: 30px，这就很不直观。
最后的区别是效率：
由于 transform 不改动 css 布局，因为渲染行为大多数情况下在元素本身，所以效率比 top left 要高。

定时器常用方法

setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码

> window.setInterval("javascript function",milliseconds);

clearInterval() 方法
用于停止 setInterval() 方法执行的函数代码。

myVar=setInterval("javascript function",milliseconds);

setTimeout() 方法
setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
clearTimeout() 方法
用于停止执行setTimeout()方法的函数代码。
settimeout与setinterval区别
1.相同条件下，setTimeout() 只执行一次，setInterval() 则循环执行；
2.setTimeout() 延迟执行一次： setTimeout(fn, 1000);
//延迟1秒，执行一次fn()；
3.setInterval() 隔段时间循环执行； setInterval(fn, 1000);
//每隔1秒，循环执行fn()

图片缩放的同时加上遮罩

QQ录屏

样式设置

.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;
}

此部分需要实现的效果：

1. 鼠标移入，整个盒子向上移动
2. 鼠标移入，图片放大
3. 一直有灰色遮罩
   层级关系：文字层级需要最高，其次是整个盒子的层级，再者是遮罩色层级，最后是图片的层级。