css图片特效

2018-06-22 05:31:48来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

网站图片往往有很多显示效果,使用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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:lavarel 添加自定义辅助函数

下一篇:laravel-5-doctrine-2 教程