css图片特效情人节

情人节的到来，为您的网站增加一些浪漫和温馨吧！在这里，我们将介绍一些使用CSS实现的图片特效，帮助您的网页更具吸引力。

/* 爱心雨 */@keyframes heartFall {
from {
    transform: translateY(-300px) rotate(0deg);
}
to {
    transform: translateY(800px) rotate(180deg);
}
}
.heart {
    position: absolute;
    top: -50px;
    display: block;
    width: 30px;
    height: 30px;
    background: url(heart.png) no-repeat;
    background-size: contain;
    animation: heartFall 4s ease-out infinite;
}
.heart:nth-child(1) {
    left: 5%;
    animation-delay: 0.5s;
}
.heart:nth-child(2) {
    left: 20%;
    animation-delay: 1s;
}
.heart:nth-child(3) {
    left: 35%;
    animation-delay: 1.5s;
}
.heart:nth-child(4) {
    left: 50%;
    animation-delay: 2s;
}
.heart:nth-child(5) {
    left: 65%;
    animation-delay: 2.5s;
}
.heart:nth-child(6) {
    left: 80%;
    animation-delay: 3s;
}
/* 飘动的气球 */@keyframes balloonFly {
from {
    transform: translate(0, 0);
}
to {
    transform: translate(50px, -50px);
}
}
.balloon {
    position: absolute;
    animation: balloonFly 3s ease-in-out infinite;
}
.balloon img {
    display: block;
    width: 50px;
    height: 80px;
}
.balloon:nth-child(1) {
    top: 10%;
    left: 20%;
}
.balloon:nth-child(2) {
    top: 20%;
    left: 40%;
    animation-delay: 0.5s;
}
.balloon:nth-child(3) {
    top: 30%;
    left: 60%;
    animation-delay: 1s;
}
.balloon:nth-child(4) {
    top: 40%;
    left: 80%;
    animation-delay: 1.5s;
}
/* 照片墙 */.photo-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.photo {
    margin: 10px;
    position: relative;
    width: 300px;
    height: 200px;
    background: url(photo.jpg) no-repeat;
    background-size: cover;
}
.photo:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}
.photo:hover:before {
    content: "Happy Valentine's Day";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: red;
}
    

上述代码中，我们实现了爱心雨、飘动的气球和照片墙三种情人节特效。您可以根据自己的需要进行更改，添加到自己的网站中。在情人节这一天，用美丽的特效为您的爱人表达爱意吧！

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