【CSS】悬浮动画

一颗不甘坠落的流星

已于 2023-07-08 18:10:23 修改

阅读量880

点赞数

分类专栏：工作随记文章标签： css 前端

于 2023-07-08 18:07:52 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/131614904

版权

工作随记专栏收录该内容

69 篇文章 3 订阅

订阅专栏

该文章展示了如何使用HTML和CSS创建一个具有悬浮动画效果的按钮。通过CSS的样式定义，包括背景颜色、边框、内边距、过渡动画和遮罩层的使用，实现了当鼠标悬停在按钮上时，遮罩层从无到有并倾斜45度的动态效果。

摘要由CSDN通过智能技术生成

文章目录

- 效果展示
- 代码实现

效果展示

在这里插入图片描述

代码实现

<!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>