本文介绍了一种使用CSS3实现鼠标悬停图片时，图片变亮的动画效果。通过设置图片的透明度和过渡属性，当鼠标移到图片上时，图片会逐渐变亮，移开后恢复原状，增强了用户体验。
CSS3鼠标经过图片变亮动画效果
<title>CSS3鼠标经过图片变亮动画效果</title>
<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(119, 41, 41, 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: transform 0.01s ease-in;
}
.photo ul li img:hover {
transform: scale(1.1);
opacity: 1;
}
</style>
</head>
<body>
<header>
<h1>美丽人像图集</h1>
</header>
<section>
<!-- div.photo>ul>li*8>a>img -->
<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>
扫一扫
1209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
