使用鼠标的悬停做出漂亮的照片样式:
布局部分:
<body>
<header>
<h1>美丽人像图集</h1>
</header>
<section>
<div class="photo">
<ul>
<li>
<a href=""><img src="img/1.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/2.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/3.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/5.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/6.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/7.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/8.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="img/9.jpg" alt="" /></a>
</li>
</ul>
</div>
</section>
</body>
样式部分:
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
/* 注意: 在背景设置线性渐变的时候,同时设置背景图的时候,必须 使用简写。全写,样式,上下会被覆盖! */
/* background-image: linear-gradient(
rgba(255, 255, 255, 0),
rgba(0, 0, 0, 1)
);
background-image: url("./img/03.jpg"); */
background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)),
url("./img/03.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
font-family: "微软雅黑";
}
header h1 {
font-size: 40px;
text-align: center;
color: #fff;
margin: 20px auto;
/* 文字内容投影(阴影)
rgba(0, 0, 0, 50%) 注意:a透明度的值 可以使用小数 也可以使用百分比
*/
text-shadow: 2px 2px 2px rgba(0, 0, 0, 50%);
}
.photo {
width: 830px;
margin: 0 auto;
padding: 10px;
background-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.photo ul li {
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
/* 溢出隐藏 */
overflow: hidden;
}
/* css中序选择器的使用 :nth-child(4n) 表示 一个集合中的4的倍数的li
只要找到 4的倍数的li,将这些li的右外边距设置为0
或者 你可以这样写 li:nth-of-type(4n)
*/
.photo ul li:nth-of-type(4n) {
margin-right: 0;
}
/* 鼠标悬停到图上的时候,我们希望图高亮显示 */
.photo ul li img {
width: 100%;
opacity: 0.85;
/* 过渡动画 */
transition: all 0.18s ease-in;
}
.photo ul li img:hover {
transform:scale(1.05);
opacity: 1;
}
</style>