说明:作为一个Java后端程序员,有时候也需要自己去写些前端代码,所以将工作中用到的一些小知识做记录分享。
1.鼠标悬停出现遮罩效果
* ①先看效果图:
* ②再献上完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
list-style-type: none;
}
.grey-row {
width: 1200px;
margin: 0 auto;
background-color: #f2f2f2;
}
.img-desc {
overflow: hidden;
padding: 20px 10px;
}
.img-desc ul li {
float: left;
width: 24%;
height: 250px;
padding: 5px;
position: relative;
z-index: 2;
overflow: hidden;
}
.img-desc ul li img {
height: 250px;
}
/*悬停出现遮罩效果*/
.img-desc ul li:hover .case_info {
top: 5px;
}
/*遮罩效果*/
.case_info {
margin-top: -0px;
position: absolute;
top: -260px;
color: #fff;
transition: all .2s;
background-color: rgba(216, 0, 0, 0.5);
width: 250px;
height: 250px;
}
h2 {
text-align: center;
line-height: 200px;
}
</style>
<title></title>
</head>
<body>
<div class="grey-row">
<div class="img-desc">
<h1>点击阴影遮罩</h1>
<ul>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
<dl class="case_info">
<dt><h2>天猫望日</h2></dt>
</dl>
</li>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
<dl class="case_info">
<dt><h2>天猫吞日</h2></dt>
</dl>
</li>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
<dl class="case_info">
<dt><h2>天猫啸日</h2></dt>
</dl>
</li>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
<dl class="case_info">
<dt><h2>天猫喵日</h2></dt>
</dl>
</li>
</ul>
</div>
</div>
</body>
</html>
* ③最后稍微做下注解说明:
图片只是静态的,最好可以自己运行上面代码直观感受下效果!
该效果除了可以作用在图片上当然也可以作用在div上;具体解释说明我在Css代码上已经加了注释;
如果看不明白的话可以复制代码,自己用浏览器开发者工具调试一下;自己动手,才能更快领悟;
2.鼠标悬停图片放大效果
* ①先看效果图:
* ②再献上完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
list-style-type: none;
}
.grey-row {
width: 1200px;
margin: 0 auto;
background-color: #f2f2f2;
}
.img-desc {
overflow: hidden;
padding: 20px 10px;
}
.img-desc ul li {
float: left;
width: 250px;
height: 250px;
padding: 12px;
position: relative;
z-index: 2;
overflow: hidden;
}
.img-desc ul li img {
height: 250px;
/*动画效果过渡时间*/
webkit-transition-delay: 0s;
-webkit-transition-duration: 1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
position: relative;
}
.img-desc ul li img:hover {
/*鼠标悬停图片放大*/
transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
/* IE 9 */
-moz-transform: scale(1.2, 1.2);
/* Firefox */
-webkit-transform: scale(1.2, 1.2);
/* Safari 和 Chrome */
-o-transform: scale(1.2, 1.2);
/* Opera */
}
.flowImg {
/*图片超出部分隐藏*/
width: 250px;
height: 250px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
</style>
<title></title>
</head>
<body>
<div class="grey-row">
<div class="img-desc">
<h1>点击图片放大</h1>
<ul>
<li>
<div class="flowImg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
</div>
</li>
<li>
<div class="flowImg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
</div>
</li>
<li>
<div class="flowImg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
</div>
</li>
<li>
<div class="flowImg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438669435&di=5992dc1bd9c4f8e4043d2b94fd7b24e8&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F04%2F06%2FB1573.jpg">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
* ③最后稍微做下注解说明:
图片只是静态的,最好可以自己运行上面代码直观感受下效果!
具体解释说明我在Css代码上已经加了注释;
如果看不明白的话可以复制代码,自己用浏览器开发者工具调试一下;自己动手,才能更快领悟;