【CSS】悬浮动画_scss 悬浮动画

作者：Monodyee | 2024-05-07 09:35:20

踩

scss 悬浮动画

文章目录

- 效果展示
- 代码实现

效果展示

在这里插入图片描述

代码实现

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/548500