CSS3鼠标悬停效果

最新推荐文章于 2024-06-01 17:33:11 发布

编程微刊

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_38822390/article/details/90402521

版权

这是一个很简单的效果，简单的记录一下代码，先看效果图。

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			.cbp-ig-grid {
				list-style: none;
				padding: 0 0 50px 0;
				margin: 0;
			}
			
			.cbp-ig-grid:after {
				clear: both;
			}
			
			.cbp-ig-grid li {
				width: 20%;
				float: left;
				height: 370px;
				text-align: center;
				border-top: 1px solid #ddd;
			}
			
			.cbp-ig-grid li>a {
				display: block;
				height: 100%;
				color: #ffffff;
				background: #000000;
				opacity: 0.7;
				text-decoration: none;
				-webkit-transition: background 0.2s;
				-moz-transition: background 0.2s;
				transition: background 0.2s;
			}
			
			.cbp-ig-grid .cbp-ig-img {
				margin: 20px 0 10px 0;
				padding: 20px 0 0 0;
				width: 80px;
				height: 80px;
				-webkit-transition: -webkit-transform 0.2s;
				-moz-transition: -moz-transform 0.2s;
				transition: transform 0.2s;
			}
			
			.cbp-ig-grid .cbp-ig-title {
				margin: 20px 0 10px 0;
				padding: 20px 0 0 0;
				-webkit-transition: -webkit-transform 0.2s;
				-moz-trans

最低0.47元/天解锁文章

编程微刊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3鼠标悬停效果

这是一个很简单的效果，简单的记录一下代码，先看效果图。<!DOCTYPE html><html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫