图片呼吸灯，CSS3图片阴影+鼠标移上放大图片

2024-09-05 12:18:47

字体：大中小

来源：转载

供稿：网友

一个CSS3图片链接效果，并且给图片加上边框阴影的漂亮效果，有人把这种效果称为“图片呼吸灯”，当鼠标移到图片上的时候，图片会瞬时放大显示，像是在“呼吸”，鼠标移走后则图片恢复原始大小，可作为一个图片列表的显示效果，用于图片站、旅游风景站或产品站都可以哦。因CSS3技术所以测试请用Chrome或火狐。

<!DOCTYPE HTML><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>图片呼吸灯，CSS3图片鼠标移上放大图片</title><style type="text/css">* {	padding: 0;	margin: 0}body {	background-color: #eee;}.test {	width: 540px;	margin: 40px auto 0}li {	width: 180px;	height: 120px;	float: left;	list-style: none}li img {	display: block;	width: 140px;	height: 80px;	padding: 8px;	background-color: #FFF;	box-shadow: 0px 0px 18px rgba(0,0,0,.4);	-webkit-transition: all ease .3s;	transition: all ease .3s}li img:hover {	-webkit-transform: scale(1.05);	transform: scale(1.05);	box-shadow: 0px 0px 18px rgba(0,0,0,.5);}</style></head><body><div class="test">  <ul>    <li><img src="/d/file/p/2024/09-05/a7629f6cf0aad38f3504fb21305219c9.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/26d8fe3069ae192e1d8fd9239fa9fd9b.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/7b68a3a9cb0ac908c022ae3f2e119676.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/aeb07e5bde84c75911ce858cb20f6cfd.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/1955683640b7f54b69bd373e8e3705ec.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/fca85ac9905c1360eb01c059c917f8a2.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/2aefb9c2033628ad8ca72649f2f9897c.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/4b44a198600a1032d3c8ffcb6a5c7095.jpg" width="140" height="80" alt=""></li>    <li><img src="/d/file/p/2024/09-05/e97cfb9ef923b5ac66b64e64b3cb1dfd.jpg" width="140" height="80" alt=""></li>  </ul></div></body></html>

上一篇：HTML5实现3D球视觉特效

下一篇：HTML5使用input元素实现音量控制滑块

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注