适合程序员七夕，生日，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>哈 哈</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