编程语言
首页 > 编程语言> > 适合程序员七夕,生日,520等日子发给女朋友的心意小礼物

适合程序员七夕,生日,520等日子发给女朋友的心意小礼物

作者:互联网

图中仅显示部分内容,可根据自己需求进行内容修改,效果图如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@import url("https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css");

			.bg-wrapper {
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				/* background-color: #D46466; */
			}

			.main-title {
				font-size: 2rem;
				position: absolute;
				z-index: 9;
				margin-top: 240px;
				color: gold;
				padding: 5px;
				background: #C51803;
				border-radius: 10px;
				cursor: pointer;
			}

			.qian {
				position: absolute;
				margin: -160px 0 0 38px;
				font-size: 3.2rem;
				color: #E8D5F1;
			}
			.main-title:hover .qian {
				opacity: 0;
				transition-delay: 1s;
			}

			.bg-wrapper .envelope-wrapper {
				background: #B4D2EE;
			}

			.bg-wrapper .envelope-wrapper .envelope {
				position: relative;
				width: 40rem;
				height: 30rem;
			}

			.bg-wrapper .envelope-wrapper .envelope:before {
				content: "";
				position: absolute;
				top: 0px;
				z-index: 2;
				border-top: 15.2rem solid #D3EAFD;
				border-right: 20rem solid transparent;
				border-left: 20rem solid transparent;
				transform-origin: top;
				transition: all 0.5s ease-in-out 0.7s;
			}

			.bg-wrapper .envelope-wrapper .envelope:after {
				content: "";
				position: absolute;
				z-index: 2;
				width: 0px;
				height: 0px;
				border-top: 15rem solid transparent;
				border-right: 20rem solid #B4D2EE;
				border-bottom: 15rem solid #B4D2EE;
				border-left: 20rem solid #B4D2EE;
			}

			.bg-wrapper .envelope-wrapper .envelope .card {
				position: absolute;
				right: 20%;
				bottom: 0;
				width: 60%;
				height: 60%;
				background: #FFF;
				text-align: center;
				transition: all 1s ease-in-out;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
				background-color: #E8D5F1;
			}

			.bg-wrapper .envelope-wrapper .envelope .card .enter {
				position: absolute;
				right: 10px;
				top: 10px;
				font-size: 2rem;
				color: rgba(68, 68, 68, 0.7);
				cursor: pointer;
			}

			.bg-wrapper .envelope-wrapper .envelope .card .text {
				position: absolute;
				top: 50%;
				left: 50%;
				font-size: 2rem;
				font-family: "Great Vibes", cursive;
				color: #C51803;
				transform: translate(-50%, -50%);
			}

			.bg-wrapper .envelope-wrapper .heart {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 4rem;
				height: 4rem;
				background: #C51803;
				z-index: 4;
				transform: translate(-50%, -80%) rotate(45deg);
				transition: transform 0.5s ease-in-out 1s;
				box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
				cursor: pointer;
			}

			.bg-wrapper .envelope-wrapper .heart:before,
			.bg-wrapper .envelope-wrapper .heart:after {
				content: "";
				position: absolute;
				width: 4rem;
				height: 4rem;
				background-color: #C51803;
				border-radius: 50%;
			}

			.bg-wrapper .envelope-wrapper .heart:before {
				top: -2rem;
			}

			.bg-wrapper .envelope-wrapper .heart:after {
				right: 2rem;
			}

			.bg-wrapper .flap .envelope:before {
				transform: rotateX(180deg);
				z-index: 0;
			}

			.bg-wrapper .flap .envelope .card {
				bottom: 300px;
				transform: scale(1.5);
				transition-delay: 1s;
			}

			.bg-wrapper .flap .heart {
				transform: rotate(-50deg);
				transform: scale(0.4);
				margin-top: -230px;
				margin-left: -25px;
				transition: 5.20s;
				transition-delay: 0.1s;
			}

			///////////////////////////////////////////////
			.hearts {
				position: absolute;
				left: 0;
				right: 0;
				z-index: 2;
			}

			.heart1 {
				position: absolute;
				bottom: 80px;
				right: 10%;
			}

			.heart1:before,
			.heart1:after {
				position: absolute;
				content: "";
				left: 50px;
				top: 0;
				width: 50px;
				height: 80px;
				background: #D00000;
				border-radius: 50px 50px 0 0;
				transform: rotate(-45deg);
				transform-origin: 0 100%;
			}

			.heart1:after {
				left: 0;
				transform: rotate(45deg);
				transform-origin: 100% 100%;
			}

			.close .heart1 {
				opacity: 0;
				animation: none;
			}

			.a1 {
				left: 20%;
				transform: scale(0.6);
				opacity: 1;
				-webkit-animation: slideUp 4s linear 1, sideSway 2s ease-in-out 4 alternate;
				animation-fill-mode: forwards;
				animation-delay: .7s;
			}

			.a2 {
				left: 55%;
				transform: scale(1);
				opacity: 1;
				-webkit-animation: slideUp 5s linear 1, sideSway 4s ease-in-out 2 alternate;
				animation-fill-mode: forwards;
				animation-delay: .7s;
			}

			.a3 {
				left: 10%;
				transform: scale(0.8);
				opacity: 1;
				-webkit-animation: slideUp 7s linear 1, sideSway 2s ease-in-out 6 alternate;
				animation-fill-mode: forwards;
				animation-delay: .7s;
			}


			@keyframes slideUp {
				0% {
					top: 0;
				}

				100% {
					top: -180px;
				}
			}

			@keyframes sideSway {
				0% {
					margin-left: 0px;
				}

				100% {
					margin-left: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div class="bg-wrapper">
			<div class="main-title item"><span class="qian">¥</span>
				<div class=" close-icon">哈哈哈哈</div>
			</div>
			<div class="envelope-wrapper">
				<div class="envelope">
					<div class="card">
						<span class="fa fa-close enter"></span>
						<div class="text">
							<div class=line1>哈哈哈哈</div>
							<div class=line2>哈&nbsp;&nbsp;哈</div>
							<div class=line3>哈哈</div>
						</div>
						<div class="hearts ">
							<div class="heart1 a1"></div>
							<div class="heart1 a2"></div>
							<div class="heart1 a3"></div>
						</div>
					</div>
				</div>
				<div class="heart"></div>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(() => {
				$(".envelope-wrapper .heart").click(() => {
					$('.envelope-wrapper').addClass('flap')
				});
				$(".main-title .close-icon").click(() => {
					$('.envelope-wrapper').removeClass('flap')
				});
			});
		</script>
	</body>
</html>

如需要其他有创意的小作品可以私聊

标签:bg,top,envelope,transform,wrapper,程序员,520,position,七夕
来源: https://www.cnblogs.com/jimyking/p/15140038.html