1.给图片加透明色，要求：当鼠标放在图片上时，会有红色的渐变色缓慢覆盖图片。
方法：通过给box设置背景图片和平面转换的平移完成
<!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>
.box{
width: 400px;
height: 200px;
background: url("img/fm.jpg") center;
overflow: hidden;
}
.box::before{
content:"";
display: block;
width: 400px;
height: 200px;
background-image: linear-gradient(
transparent,
rgba(255, 6, 6, 0.6));
transform:translateY(100%);
transition:all 1s;
}
.box:hover::before{
transform:translateY(0%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>2.给图片设置类似开门的效果。要求：当鼠标放在盒子上左右两边的汽车会向左右打开。
方法：给box设置背景图片仪表盘，然后让汽车图片浮动，
<!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>
.box{
width: 1366px;
height: 600px;
background: url("./img/bg.jpg");
/*图片不能处理成<img>标签*/
margin:0 auto;
/*元素溢出处理*/
overflow:hidden;
}
/*并集选择器，设置伪元素在盒子的前后*/
.box::before,.box::after{
content:"";
/*让汽车图片从中间分为左右两部分，左半部分*/
float:left;
width:50%;
height:600px;
background-image: url("img/fm.jpg");
/*过渡*/
transition:all 60s;
}
.box::after{
/*右半部分*/
background-position: right 0;
}
/*渐变实现，通过平面转换的平移*/
.box:hover::before{
transform:translateX(-100%);
}
.box:hover::after{
transform:translateX(100%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
