用css做一个简单的特效
先看效果图
一.创建结构
<!-- container为最外层的容器 -->
<div class="container">
<!-- item为每一个图片的容器 -->
<div class="item">
<img src="https://picsum.photos/180/230?random=1" alt="">
<!-- curtain为覆盖层 -->
<div class="curtain"></div>
</div>
<div class="item">
<img src="https://picsum.photos/180/230?random=2" alt="">
<div class="curtain"></div>
</div>
<div class="item">
<img src="https://picsum.photos/180/230?random=3" alt="">
<div class="curtain"></div>
</div>
<div class="item">
<img src="https://picsum.photos/180/230?random=4" alt="">
<div class="curtain"></div>
</div>
</div>
注:
https://picsum.photos/180/230?random=1
为随机图片,180/230
为图片宽度和高度,可修改,random=1
可以修改,用来表示几张图片不一样
此时效果为:
二.调整样式
1.初始化body的样式
body {
margin: 0;
padding: 0;
/* 使用flex布局 */
display: flex;
/* 项目横向排列 */
flex-direction: row;
/* 水平居中(主轴居中) */
justify-content: center;
/* 垂直居中(交叉轴居中) */
align-items: center;
min-height: 100vh;
background-color: #e8e8e4;
}
此时效果为:
注:
- 由于
container
没有设置宽度,会默认被子元素撑开- 由于使用了随机图片,所以下面的效果图里面的图片都不相同
2.设置container
的样式
.container {
/* 用flex布局 */
display: flex;
/* 项目横向排列 */
flex-direction: row;
/* 水平居中(主轴居中) */
justify-content: center;
/* 当元素无法一行显示时,允许换行 */
flex-wrap: wrap;
/* 当元素换行时多行之间垂直居中 */
align-content: center;
}
此时效果为:
3.设置item
的样式
.item {
/* 设置宽度和高度 */
width: 180px;
height: 230px;
/* 设置外边距,让图片之间出现距离 */
margin: 10px;
/* 溢出部分隐藏(是为了配合后面改变盒子形状设置的) */
overflow: hidden;
/* 相对定位(为了curtain的覆盖设置的) */
position: relative;
/* 设置过渡 */
transition: .3s box-shadow ease-in-out, .3s border-radius ease-in-out;
}
此时效果为:
注:
cuitain
幕布,也就是鼠标未移入时,图片上有一层半透明的幕布遮挡
4.设置curtain
的样式
.item .curtain {
/* 绝对定位用来设置幕布完全遮挡住图片 */
position: absolute;
top: 0;
width: inherit;
height: inherit;
/* 设置幕布的颜色为黑色,透明度为0.3 */
background-color: rgba(0, 0, 0, .3);
/* 设置过渡 */
transition: .3s background-color ease-in-out;
}
此时效果为:
图片变暗了
5.设置鼠标移入的效果
.item:hover {
/* 鼠标移入时,设置阴影 */
box-shadow: 0 0 9px #333;
/* 鼠标移入时,增加一个圆角 */
border-radius: 13px;
}
.item:hover .curtain {
background-color: transparent;
}
大功告成:
全部代码
<!DOCTYPE html>
<html lang="zh-n">
<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>csdn</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #e8e8e4;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-content: center;
}
.item {
overflow: hidden;
width: 180px;
height: 230px;
margin: 10px;
position: relative;
transition: .3s box-shadow ease-in-out, .3s border-radius ease-in-out;
}
.item .curtain {
position: absolute;
width: inherit;
height: inherit;
background-color: rgba(0, 0, 0, .3);
top: 0;
transition: .3s background-color ease-in-out;
}
.item:hover {
box-shadow: 0 0 9px #333;
border-radius: 13px;
}
.item:hover .curtain {
background-color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="https://picsum.photos/180/230?random=1" alt="">
<div class="curtain"></div>
</div>
<div class="item">
<img src="https://picsum.photos/180/230?random=2" alt="">
<div class="curtain"></div>
</div>
<div class="item">
<img src="https://picsum.photos/180/230?random=3" alt="">
<div class="curtain"></div>
</div>
<div class="item">
<img src="https://picsum.photos/180/230?random=4" alt="">
<div class="curtain"></div>
</div>
</div>
</body>
</html>