小白在学习前端技术时候, 一定会在刚开始的时候学习 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>
[刘阳 Java]_CSS 鼠标悬停
来源: http://www.bubuko.com/infodetail-2515773.html