CSS特效002：花样的鼠标悬停效果

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享，希望能给您带来帮助。

css实战中，鼠标的悬停有各种各样的效果，下面的这个示例集中了填充、脉搏抖动，关闭，提升，向上填充，来门，错位等各种花样特效，很炫酷实用

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-08
*/
<template>
	<div class="container">
		<div class="top">
			<h3>花样的鼠标悬停特效</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div style="width:640px ; margin:0 auto; background:#222222;">
			<button class="fill">Fill In</button>
			<button class="pulse">Pulse</button>
			<button class="close">Close</button>
			<button class="raise">Raise</button>
			<button class="up">Fill Up</button>
			<button class="slide">Slide</button>
			<button class="offset">Offset</button>
		</div>

	</div>
</template>

<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 130px;
		padding: 10px 0;
		background: mediumpurple;
		color: #fff;
	}

	.fill:hover,
	.fill:focus {
		box-shadow: inset 0 0 0 2em var(--hover);
	}

	.pulse:hover,
	.pulse:focus {
		-webkit-animation: pulse 1s;
		animation: pulse 1s;
		box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
	}

	@-webkit-keyframes pulse {
		0% {
			box-shadow: 0 0 0 0 var(--hover);
		}
	}

	@keyframes pulse {
		0% {
			box-shadow: 0 0 0 0 var(--hover);
		}
	}

	.close:hover,
	.close:focus {
		box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
	}

	.raise:hover,
	.raise:focus {
		box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
		-webkit-transform: translateY(-0.25em);
		transform: translateY(-0.25em);
	}

	.up:hover,
	.up:focus {
		box-shadow: inset 0 -3.25em 0 0 var(--hover);
	}

	.slide:hover,
	.slide:focus {
		box-shadow: inset 6.5em 0 0 0 var(--hover);
	}

	.offset {
		box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
	}

	.offset:hover,
	.offset:focus {
		box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
	}

	.fill {
		--color: #a972cb;
		--hover: #cb72aa;
	}

	.pulse {
		--color: #ef6eae;
		--hover: #ef8f6e;
	}

	.close {
		--color: #ff7f82;
		--hover: #ffdc7f;
	}

	.raise {
		--color: #ffa260;
		--hover: #e5ff60;
	}

	.up {
		--color: #e4cb58;
		--hover: #94e458;
	}

	.slide {
		--color: #8fc866;
		--hover: #66c887;
	}

	.offset {
		--color: #19bc8b;
		--hover: #1973bc;
	}

	button {
		color: var(--color);
		-webkit-transition: 0.25s;
		transition: 0.25s;
	}

	button:hover,
	button:focus {
		border-color: var(--hover);
		color: #fff;
	}

	button {
		background: none;
		border: 2px solid;
		font: inherit;
		line-height: 1;
		margin: 0.5em;
		padding: 1em 2em;
	}

</style>


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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

CSS基础知识点

1.CSS样式表
2.基础选择器：（1）标签选择器，（2）类选择器，（3）id选择器，（4）通配符选择器
3.复合选择器：（1）后代选择器，（2）子选择器，（3）并集选择器，（4）交集选择器，（5）伪类选择器。
4.字体样式属性：（1）字体大小font-size，（2）字体类型font-family，（3）字体粗细font-weight，（4）字体风格font-style
5.文本外观样式：（1）设置文本颜色color，（2）word-spacing，（3）letter-spacing，（4）line-height，（5）text-transform，（6）text-decoration，（7）text-align，（8）text-indent，（9）white-space
6.文本外观属性：（1）text-shadow，（2）overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性：（1）border-style，（2）border-width，（3）border-color，（4）border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片：（1）background-repeat，（2）background-position，（3）background-attachment，（4）background-size，（5）background-origin，（6）background-clip，（7）复合写法，（8）不透明
10.元素的类型
11.span标签
12.display
13.表格标签：（1）table标签，（2）tr标签，（3）td标签，（4）th标签，（5）表格边框，（6）折叠边框，（7）表格宽度和高度，（8）表格边框间距border-spacing，（9）表格标题位置caption-side
14.表单
14.1创建表单：（1）标签
14.2表单控件：（1）input控件，（2）input/标签的type属性，（3）textarea控件，（4）select控件
15.CSS盒子模型：（1）边框（border），（2）内边距(padding)，（3）外边距（margin），（4）清除内外边距，（5）盒子模型
16.浮动布局：（1）传统网页布局，（2）浮动简介，（3）浮动特性，（4）清除浮动
17.定位布局：（1）定位组成，（2）相对定位relative，（3）绝对定位absolute，（4）子绝父相，（5）固定定位fixed，（6）定位叠放次序z-index，（7）定位拓展
三.其他
1.圆角边框：（1）圆形，（2）圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式：（1）鼠标样式 cursor，（2）轮廓线 outline，（3）防止拖拽文本域 resize，
5.过渡 transition

结尾语

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。