这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。
还有7天，这一个月就结束啦。看一下今天的css小项目啦。
效果展示
效果说明
将鼠标浮动到图片上的时候，图片会进行一系列的样式变化。从左到右依次对图片进行说明，分别为模糊、加深、灰度。
技术说明
html:img加载图片，class
css:类选择器，hover鼠标浮动，flex布局，-webkit-filter图片特效
代码展示
html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="photo">
<img src="https://images.pexels.com/photos/10038447/pexels-photo-10038447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="a1">
<img src="https://images.unsplash.com/photo-1650548211932-f6ebd1c73867?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" class="a2" >
<img src="https://images.unsplash.com/photo-1650646002393-9d057933cf89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" class="a3" >
</div>
</body>
</html>
css
margin: 0;
padding: 0;
}
body{
/* flex布局 */
display: flex;
/* 使写出的元素进行居中处理 */
justify-content: center;
align-items: center;
height: 100vh;
}
img{
width: 400px;
height: 300px;
}
.a1:hover{
/* 模糊效果 */
-webkit-filter: blur(4px);
}
.a2:hover{
/* 深色的特效 ，有种老照片泛黄的感觉*/
-webkit-filter: sepia(100%);
}
.a3:hover{
/* 灰色的效果 */
filter: grayscale(50%);
}
后期延伸
图片的特效有很多，这就类似图片的滤镜。比如说drop-shadow是图片底部出现颜色；brightness图片出现亮光的样式（美颜用这个就很好使）。使用的方法也都是类似的，将整个图片先选出来，然后选择将鼠标移动到图片就出现一定的效果。最后使用css样式对图片做出自己喜欢的样式的更改就可以啦~
或者也可以做成盲盒的形式，点开一个图片，背后会出现一定的文字~
