<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片鼠标效果加播放图标</title>
<style>
*{
margin:0;
padding:0px;
list-style:none;
}
.content{
width:1190px;
margin:auto;
}
.img-out{
width:273px;
height:158px;
border:1px solid #e5e5e6;
position:relative;
margin:0 20px;
float:left;
margin-top:20%;
box-shadow:0px 1px 4px rgba(154,154,154,1);
}
.img-out a{
display:block
}
.img-out img{
width:273px;
height:158px;
}
.img-out::before{
content:"";
position:absolute;
z-index:1;
top:0%;
width:273px;
height:158px;
bottom:0;
background:rgba(0,0,0,0.3)}
.img-out:hover::before{
background:none;
z-index:-1;
}
.img-out::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
/播放图标/
.video-icon{
width:50px;
height:50px;
position:absolute;
top:32%;
left:40%;
z-index:10;
background:rgba(0,0,0,0.6);
border-radius:4px;
box-shadow:0px 0px 10px rgba(154,154,154,1);
}
.video-icon span{
display:block;
width:0px;
height:0px;
border-width:13px;
border-radius:3px;
margin:11px 0 0 20px;
border-style:solid;
border-color:rgba(154,154,154,0) rgba(154,154,154,0) rgba(154,154,154,0) rgba(255,255,255,0.8);
}
.img-out:hover .video-icon span{
border-color:rgba(154,154,154,0) rgba(154,154,154,0) rgba(154,154,154,0) rgba(255,255,255,1);
}
</style>
</head>
<body>
<div class="content">
<ul>
<li><div class="img-out"><a href="http://www.zhizaoyun.com/" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://sns.zhizaoyun.com/images/listimg/img05.jpg" /></a>
<div class="video-icon"><span></span></div></div></li>
<li>
<div class="img-out"><a target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://sns.zhizaoyun.com/images/listimg/img05.jpg" /></a>
<div class="video-icon"><span></span></div></div></li>
<li>
<div class="img-out"><a target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://sns.zhizaoyun.com/images/listimg/img05.jpg" /></a>
<div class="video-icon"><span></span></div></div></li></ul>
</div>
</body>
</html>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
