css3。0做七夕背景 |css获取图片中的图标

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来为自己的爱情故事加点浪漫色彩。