CSS实现简单的 hinge 动画

最新推荐文章于 2022-11-03 09:43:23 发布

Wrj6811

最新推荐文章于 2022-11-03 09:43:23 发布

阅读量303

点赞数

分类专栏：前端小功能 css 文章标签： css3

本文链接：https://blog.csdn.net/Wrj6811/article/details/107570163

版权

前端小功能同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

效果如下图所示：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HINGE</title>
		<link rel="stylesheet" type="text/css" href="../lib/css/hinge.css"/>
	</head>
	<body>
		<div class="box">Hinge SHUAI</div>
	</body>
</html>

css代码:

body{
	margin: 0;
	padding: 0;
/* 	font-family: "Open Sans", sans-serif; */
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

.box{
	background-color: #3498db;
	color: #fff;
	padding: 10px 20px;
	font-size: 80px;
	font-weight: 900;
	transform-origin: top left;
	animation: hinge 2s ease-in-out;
}

@keyframes hinge{
	20%,60%{
		transform: rotate(70deg);
	}
	40%,80%{
		transform: rotate(55deg);
		opacity: 1;
	}
	100%{
		transform: translateY(600px);
		opacity: 0;
	}
}