水滴注册登录页面的动画 

<!DOCTYPE html>
<html>
	<head>
		<title>【每日一练】107—CSS实现一款水滴注册登录页面的动画效果</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="container">
			<div class="drop">
				<div class="content">
					<h2>登录</h2>
					<form>
						<div class="inputBox">
							<input type="text" placeholder="用户名">
						</div>
						<div class="inputBox">
							<input type="password" placeholder="密码">
						</div>
						<div class="inputBox">
							<input type="submit" value="登录">
						</div>
					</form>
				</div>
			</div>
			<a href="http://www.webqdkf.com" class="btns" target="_blank">忘记密码</a>
			<a href="http://www.webqdkf.com" class="btns signup" target="_blank">注册</a>
		</div>
	</body>
</html>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: #eff0f4;
	}

	.container {
		position: relative;
		left: -80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container .drop {
		position: relative;
		width: 350px;
		height: 350px;
		box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
			25px 35px 20px rgba(0, 0, 0, 0.05),
			25px 30px 30px rgba(0, 0, 0, 0.05),
			inset -20px -20px 25px rgba(255, 255, 255, 0.9);
		transition: 0.5s;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.container .drop:hover {
		border-radius: 10%;
	}

	.container .drop::before {
		content: '';
		position: absolute;
		top: 50px;
		left: 85px;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		background: #fff;
		opacity: 0.9;
	}

	.container .drop::after {
		content: '';
		position: absolute;
		top: 90px;
		left: 110px;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #fff;
		opacity: 0.9;
	}

	.container .drop .content {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		padding: 40px;
		gap: 15px;
	}

	.container .drop .content h2 {
		position: relative;
		color: #333;
		font-size: 1.5em;
	}

	.container .drop .content form {
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: center;
		align-items: center;
	}

	.container .drop .content form .inputBox {
		position: relative;
		width: 225px;
		box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
			inset -2px -5px 10px rgba(255, 255, 255, 1),
			15px 15px 10px rgba(0, 0, 0, 0.05),
			15px 10px 15px rgba(0, 0, 0, 0.025);
		border-radius: 25px;
	}

	.container .drop .content form .inputBox::before {
		content: '';
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 65%;
		height: 5px;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 5px;
	}

	.container .drop .content form .inputBox input {
		border: none;
		outline: none;
		background: transparent;
		width: 100%;
		font-size: 1em;
		padding: 10px 15px;
	}

	.container .drop .content form .inputBox input[type="submit"] {
		color: #fff;
		text-transform: uppercase;
		font-size: 1em;
		cursor: pointer;
		letter-spacing: 0.1em;
		font-weight: 500;
	}

	.container .drop .content form .inputBox:last-child {
		width: 120px;
		background: #00a6bc;
		box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
			15px 15px 10px rgba(0, 0, 0, 0.05),
			15px 10px 15px rgba(0, 0, 0, 0.025);
		transition: 0.5s;
	}

	.container .drop .content form .inputBox:last-child:hover {
		width: 150px;
	}

	.btns {
		position: absolute;
		right: -120px;
		bottom: 0;
		width: 120px;
		height: 120px;
		background: #00a6bc;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		text-decoration: none;
		color: #fff;
		line-height: 1.2em;
		letter-spacing: 0.1em;
		font-size: 0.8em;
		transition: 0.25s;
		text-align: center;
		box-shadow: inset 10px 10px 10px rgba(0, 166, 188, 0.05),
			15px 25px 10px rgba(0, 166, 188, 0.1),
			15px 20px 20px rgba(0, 166, 188, 0.1),
			inset -10px -10px 15px rgba(0, 166, 188, 0.5);
		border-radius: 50%;
	}

	.btns::before {
		content: '';
		position: absolute;
		top: 15px;
		left: 30px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #fff;
		opacity: 0.45;
	}

	.btns.signup {
		bottom: 150px;
		right: -120px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #00a6bc;
		box-shadow: inset 10px 10px 10px rgba(0, 166, 188, 0.05),
			15px 25px 10px rgba(0, 166, 188, 0.1),
			15px 20px 20px rgba(0, 166, 188, 0.1),
			inset -10px -10px 15px rgba(0, 166, 188, 0.5);
	}

	.btns.signup::before {
		left: 20px;
		width: 15px;
		height: 15px;
	}

	.btns:hover {
		border-radius: 10%;
	}
</style>
posted @ 2025-02-25 16:54  刘酸酸sour  阅读(7)  评论(0)    收藏  举报