css3求婚教程 |h5模板 css

/* 加上好友请求 */
.friend-request:before {
content: "偶喜欢你";
color: #e60073;
font-size: 30px;
position: absolute;
top: -40px;
left: -15px;
animation: heartbeat 2s infinite;
}
/* 加上心形图标 */
.heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: sweing 2s infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background-color: #e60073;
border-radius: 25px 25px 0 0;
transform: rotate(45deg);
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
top: 0;
left: -25px;
}
/* 离不开你了 */
.need-you {
color: #e60073;
font-size: 60px;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
animation: heartbeat 2s 2s infinite;
}
/* 心跳动画 */
@keyframes heartbeat {
from {
font-size: 30px;
}
to {
font-size: 40px;
}
}
/* 呼吸动画 */
@keyframes sweing {
0% {
transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
opacity: 0.7;
}
50% {
transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
opacity: 0.7;
}
}

以上就是一个简单的CSS3求婚效果，只需要通过上面的代码调整位置和样式细节就可以自己制作一个属于自己的求婚效果啦！