CSS按钮动画

最新推荐文章于 2024-08-17 12:53:28 发布

fastrack_0706

最新推荐文章于 2024-08-17 12:53:28 发布

阅读量342

点赞数 1

分类专栏： web前端文章标签： css html5 css3

本文链接：https://blog.csdn.net/fastrack_15233866884/article/details/115177177

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

btn-default：基本样式按钮

btn-primay：蓝色按钮

btn-success：绿色按钮

btn-error：红色按钮

btn-warning：黄色按钮

btn-anim1：按钮爆炸动画效果

btn-anim2：按钮左到右动画效果

btn-anim3：按钮左上角爆炸动画效果

btn-anim4：按钮下到上动画效果

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* 爆炸：中心爆炸，角落爆炸 */
@keyframes anim1 {
	from {
		width: 1px;
		height: 1px;
		opacity: 1;
		transform: scale(0);
		background-color: #FFFFFF;
	}

	to {
		width: 1px;
		height: 1px;
		opacity: 0;
		transform: scale(100);
		background-color: #FFFFFF;
	}
}

/* 左边到右边 */
@keyframes atob2 {
	from {
		width: 1px;
		opacity: 1;
		transform: scale(0);
		background-color: #FFFFFF;
	}

	to {
		width: 1px;
		opacity: 0;
		transform: scale(100);
		background-color: #FFFFFF;
	}
}

/* 下边到上边*/
@keyframes atob4 {
	from {
		height: 1px;
		opacity: 1;
		transform: scale(0);
		background-color: #FFFFFF;
	}

	to {
		height: 1px;
		opacity: 0;
		transform: scale(100);
		background-color: #FFFFFF;
	}
}

.clearfix::after {
	content: '';
	display: flex;
	clear: both;
}

.warp {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #23B8FF;
}

.warp .btns {
	position: absolute;
	left: 50%;
	top: 200px;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 500px;
	margin-left: -250px;
}

/* 
公共样式 不依赖其他 
*/
.btn-default {
	position: relative;
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #FFF;
	overflow: hidden;
}

.btn-default.btn-primay {
	background-color: #337ab7;
}

.btn-default.btn-success {
	background-color: #5cb85c;
}

.btn-default.btn-error {
	background-color: #d9534f;
}

.btn-default.btn-warning {
	background-color: #f0ad4e;
}

/* 中心爆炸 */
.btn-default.btn-anim1:hover::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 49%;
	top: 49%;
	border-radius: 50%;
	animation: anim1 .5s linear forwards;
}

/* 左边到右边 或者右边到左边 */
.btn-default.btn-anim2:hover::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 49%;
	height: 100px;
	animation: atob2 .5s linear forwards;
}

/* 左上角到右下角 */
.btn-default.btn-anim3:hover::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	animation: anim1 .5s linear forwards;
}

/* 下边到上边 */
.btn-default.btn-anim4:hover::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100px;
	border-radius: 50%;
	animation: atob4 .5s linear forwards;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<div class="warp">
			<div class="btns">
				<div class="btn-default btn-primay btn-anim1">主要</div>
				<div class="btn-default btn-error btn-anim2">错误</div>
				<div class="btn-default btn-success btn-anim3">成功</div>
				<div class="btn-default btn-warning btn-anim4">警告</div>
				<span class="btn-default btn-primay btn-anim4">我是button</span>
				<button class="btn-default btn-error btn-anim1">我是button</button>
			</div>
		</div>
	</body>
</html>