css悬停特效

纯css+html实现的一个简单鼠标移动上去改变背景颜色的效果。

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		*, *:after, *:before {
			box-sizing: border-box;
		}

		body {
			font-family: "DM Sans", sans-serif;
			background-color: #f2f5f7;
		}

		.container {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem;
		}

		.post {
			display: flex;
			text-decoration: none;
			color: inherit;
			max-width: 400px;
			position: relative;
			padding: 2rem;
			box-shadow: inset 0 0 0 4px #000, inset -4px -4px 0 6px #CCC;
			background-color: #FFF;
			cursor: pointer;
		}
		.post:before {
			position: absolute;
			left: 0;
			bottom: 0;
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background-color: #000;
			transform-origin: 0 bottom 0;
			transform: scaleY(0);
			transition: 0.4s ease-out;
		}
		.post:hover .post-title {
			color: #FFF;
		}
		.post:hover:before {
			transform: scaleY(1);
		}

		.post-title {
			position: relative;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.333;
			transition: 0.4s ease-out;
		}

	</style>
</head>
<body>
	<div class="container">
		<!-- code here -->
		<a class="post" href="#">
			<h2 class="post-title">我有特效,你移动上来看看</h2>
		</a>
	</div>
</body>
</html>

人已赞赏
实用片段

JS随机生成颜色

2020-4-25 14:58:49

实用片段

纯html+css打造一款的电台图标

2020-4-25 17:55:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索