css圖片特效
阿新 • • 發佈：2017-11-23
gin float ive 主題 實現 嘉賓 lang amp ansi
網站圖片往往有很多顯示效果，使用css是實現圖片特效的比較簡便的方式。下面記錄一段css鼠標指向的多重特效：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.anli li {
float: left;
position: relative;
width: 320px;
height: 320px;
background-color: red;
margin-top: 20px;
overflow: hidden;
}
/* li+li 選擇緊接在 <li> 元素之後的所有 <li> 元素。此處指後兩個 li 標簽*/
.anli li+li {
margin-left: 20px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 320px;
height: 320px;
background-color: black;
opacity: 0;
transition: 0.8s;
z-index: 8;
}
.anli img {
width: 320px;
transition: 0.8s;
z-index: 5;
position: relative;
/*height: 320px;*/
}
.anli .text{
color: white;
z-index: 10;
position: absolute;
top: 0px;
left:0px;
padding: 20px;
}
.text .move{
margin-top: 245px;
transition: 0.8s;
}
/* li:hover .move 鼠標移上後 move 標簽的動畫效果*/
.anli li:hover .move{
margin-top: 80px;
}
.anli li:hover .move+.move{
margin-top: 20px;
}
.anli li:hover img{
transform: scale(1.1);
}
.anli li:hover .mask{
opacity: 0.5;
}
</style>
</head>
<body>
<ul class="anli">
<li>
<div class="mask"></div>
<img src="1e.jpg" />
<div class="text">
<h2 class="move">秦凱&何姿西安婚禮</h2>
<p class="move">高雅灰+輕奢粉，婚禮圍繞「漣漪」這一主題，整體呈現了“流動的水”這一概念。</p>
<p class="move">酒店 西安豪享來溫德姆至尊酒店</p>
<p class="move">嘉賓 300人以上</p>
</div>
</li>
<li></li>
<li></li>
</ul>
</body>
</html>
css圖片特效