css3。0做七夕背景

CSS3.0是一种用于网页设计的语言，它为我们提供了更多的样式选择和效果。想要制作七夕节的背景，我们可以使用CSS3.0来实现。

body {
    font-family: Arial, sans-serif;
    background: #fafafa;
}
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(stars.png) repeat top center;
    animation: twinkling 10s linear infinite;
}
@keyframes twinkling {
0% {
     opacity: 1;
 }
25% {
     opacity: 0.5;
 }
50% {
     opacity: 0.3;
 }
75% {
     opacity: 0.5;
 }
100% {
     opacity: 1;
 }
}
.hearts {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10em;
    line-height: 1;
    animation: beating 1s linear infinite;
}
@keyframes beating {
0% {
     transform: scale(1);
 }
50% {
     transform: scale(1.2);
 }
100% {
     transform: scale(1);
 }
}
    

上面的代码实现了一个星空的背景和一颗跳动的心形图案。在html中，我们只需要添加两个div，分别给它们添加stars和hearts的class就可以啦。

div class="stars">
    /div>
    div class="hearts">
    i class="fas fa-heart">
    /i>
    /div>
    

如此简单的CSS3.0代码就可以让我们的页面变得非常有情调啦。这个七夕，你也可以用CSS3.0来为自己的爱情故事加点浪漫色彩。

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