CSS3动画 - 图片开关灯阴影动画

最新推荐文章于 2022-07-21 17:00:31 发布

草巾冒小子

最新推荐文章于 2022-07-21 17:00:31 发布

阅读量856

点赞数

分类专栏： CSS 3 HTML 5 img图片处理

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/83022724

版权

CSS 3 同时被 3 个专栏收录

60 篇文章 3 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

HTML 5

33 篇文章 3 订阅

订阅专栏

1. 效果图

在这里插入图片描述

2. 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3动画-图片开关灯阴影效果</title>
<style type="text/css">
	ul,li{list-style: none;}
	.toppic li{
		width: 280px;height: 160px;
		float: left;background: #000;
		overflow: hidden;margin: 10px;
	}
	.toppic li img{width: 100%;height: 100%;}
	.toppic li i {
	    display: block;
	    opacity: 0.7;
	    -moz-transition: all .5s ease;
	    -webkit-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	    -o-transition: all .5s ease;
	    transition: all .5s ease;
	    overflow: hidden;
	}
	.toppic li:hover i {
	    opacity: 1;
	}
</style>
</head>
<body>
	<ul class="toppic">
		<li><i><img src="images/toppic01.jpg"></i></li>
		<li><i><img src="images/toppic02.jpg"></i></li>
	</ul>
</body>
</html>