css3求婚教程

CSS3是前端开发中不可或缺的一部分，它可以用来美化网页，实现一些炫酷的效果，比如用CSS3来求婚，你是不是觉得很有创意呢？

/* 加上好友请求 */.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求婚效果，只需要通过上面的代码调整位置和样式细节就可以自己制作一个属于自己的求婚效果啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！