【CSS】悬浮动画

news2024/9/23 3:25:49

文章目录

- 效果展示
- 代码实现

效果展示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>一颗不甘坠落的流星</title>
	</head>
	<style type="text/css">
		.bth {
			/* 添加背景颜色 */
			background-color: white;
			/* 设置圆角边框 */
			border-radius: 10px;
			/* 设置边框样式 */
			border: 1px solid aquamarine;
			/* 添加字体颜色 */
			color: aquamarine;
			/* 添加内边距 */
			padding: 10px 20px;
			/* 字体加粗 */
			font-weight: bold;
			/* 相对定位 */
			position: relative;
			/* 添加过渡动画 */
			transition: all 1s;
			/* 溢出隐藏 */
			overflow: hidden;
		}

		/* 遮罩层 */
		.bth::before {
			content: '';
			width: 0;
			height: 100%;
			position: absolute;
			left: -30px;
			top: 0;
			background-color: aquamarine;
			/* 添加斜切，让元素倾斜45度 */
			transform: skewX(45deg);
			transition: all 0.5s;
			/* 降低悬浮遮罩透明度 */
			opacity: 0.2;
		}

		/* 添加悬浮效果：未悬浮时width为0,不显示，悬浮时添加宽度*/
		.bth:hover::before {
			width: 180%;
			/* 调整悬浮时的字体颜色 */
			color: white;
		}
	</style>
	<body>
		<!-- 准备一个按钮 -->
		<button type="button" class="bth">悬浮动画</button>
	</body>
	<script type="text/javascript">
	</script>
</html>