小白在学习前端技术时候，一定会在刚开始的时候学习CSS2和CSS3的相关知识。这篇内容给大家介绍一个CSS鼠标悬停的效果。大家可以先看下面的效果图，然后我们在说一下实现的效果要求吧
上图效果非常简单和清晰，就是鼠标放上去能够将图片进行缩率图的放小效果。实现要求
- CSS的伪类hover的应用，通过伪类完成CSS样式的变化
- CSS3中的transform:scale(...)的应用，完成缩放比例的设置
- CSS3中的过渡transition:all 200ms ease-in样式的的应用，因为缩放效果需要过渡的属性来触发效果的实现
- 图片和文字通过定位来进行位置的设置，图片会浮动到文字的上方，同时图片定位是基于父容器来绝对定位的
下面是整个程序的源码，大家可以复制下来进行测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,img {
border: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.carre_couleur {
width: 200px;
height: 200px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.base_hov .retract {
-webkit-transition:all 200ms ease-in;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1);
-moz-transition:all 200ms ease-in;
-moz-transform-origin:50% 20%;
-moz-transform:scale(1);
-ms-transition:all 200ms ease-in;
-ms-transform-origin:50% 20%;
-ms-transform:scale(1);
position: absolute;
left: 0;
width: 200px;
height: 200px;
z-index: 2;
}
.base_hov:hover .retract {
-webkit-transition:all 200ms ease-in;
-webkit-transform:scale(0.6);
-moz-transition:all 200ms ease-in;
-moz-transform:scale(0.6);
-ms-transition:all 200ms ease-in;
-ms-transform:scale(0.6);
transition:all 200ms ease-in;
transform:scale(0.6);
}
.acced {
width: 180px;
padding: 10px;
bottom: 0;
position: absolute;
z-index: 1;
text-align: left;
}
.big-acced {
color: #FFFFFF;
font-size: 25px;
font-weight: 400;
}
.middle_acced {
color: #FFFFFF;
font-size: 15px;
font-weight: 400;
}
</style>
</head>
<body>
<div align="center">
<div class="carre_couleur base_hov" style="background-color: #f8b334;">
<a href=#"">
<div class="retract" style="background-color: #f8b334;">
<img src="img/1.png"/>
</div>
<div class="acced">
<div class="big-acced">商店</div>
<div class="middle_acced">欢迎光临</div>
</div>
</a>
</div>
<div class="carre_couleur base_hov" style="background-color: #2ecc71;">
<a href=#"">
<div class="retract" style="background-color: #2ecc71;">
<img src="img/2.png"/>
</div>
<div class="acced">
<div class="big-acced">影视</div>
<div class="middle_acced">欢迎光临</div>
</div>
</a>
</div>
<div class="carre_couleur base_hov" style="background-color: #e74c3c;">
<a href=#"">
<div class="retract" style="background-color: #e74c3c;">
<img src="img/3.png"/>
</div>
<div class="acced">
<div class="big-acced">设备</div>
<div class="middle_acced">欢迎光临</div>
</div>
</a>
</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/liuyangjava/p/8506802.html
时间： 2024-10-07 02:40:07