来源地址
https://www.douyin.com/user/self?modal_id=7224788327881362746&showTab=favorite_collection
CSS鼠标状态
https://blog.csdn.net/leng0920/article/details/77413042
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/*整体背景*/
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #efeeee;
gap: 30px;
}
/*两个按钮的默认效果*/
.img{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
-18px -18px 30px rgba(255, 255, 255, 1);
transition: all .2s ease-out;
}
img{
width: 60px;
transition: all .2s ease-out;
}
/*
:link{} 鼠标点击前显示的状态
:hover{} 鼠标悬停时的状态
:visited{} 鼠标点击后的状态
:active{} 鼠标点击时的状态
:focus{} 点击后鼠标移开保持鼠标点击时的状态[获得焦点]（只有在<a href="#"></a>时标签中有效）
*/
/*鼠标接触之后两个按钮的效果*/
.img:hover{
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
0 0 0 rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
}
.img:hover img{
width: 58px;
}
</style>
<body>
<div class="img">
<img src="https://img1.imgtp.com/2023/05/10/PwBFIrQM.png"/>
</div>
<div class="img">
<img src="https://img1.imgtp.com/2023/05/10/apOOIzKe.png"/>
</div>
</body>
</html>
扫一扫
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
