今天小编给大家分享一下css3怎么实现悬停图片库的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下
今天小编给大家分享一下css3怎么实现悬停图片库的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
代码
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-Scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta Http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/CSS">
.hovergallery img{
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
</style>
</head>
<body>
<div class="hovergallery">
<img src="images/001.jpg" width="300" height="180" />
<img src="images/002.jpg" width="300" height="180" />
<img src="images/003.jpg" width="300" height="180" />
<img src="images/004.jpg" width="300" height="180" />
</div>
</body>
</html>
以上就是“CSS3怎么实现悬停图片库”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网node.js频道。
--结束END--
本文标题: CSS3怎么实现悬停图片库
本文链接: https://www.lsjlt.com/news/92354.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0