下面是一个CSS3星空效果的源代码:
body { background-color: black; /* 设定背景色为黑色 */ } /* 生成星星的方法 */ @keyframes starAnim { from { opacity: 0; /* 开始时透明度为0 */ transform: translateY(0); /* 垂直方向上不移动 */ } to { opacity: 1; /* 结束时透明度为1 */ transform: translateY(20px); /* 垂直方向上向下移动20px */ } } /* 显示星星为五角形 */ .star { width: 0; height: 0; border-right: 20px solid transparent; border-bottom: 13px solid white; border-left: 20px solid transparent; transform: rotate(35deg); position: absolute; animation: starAnim 1s linear infinite; } /* 显示星星的位置 */ .star:nth-child(1) { top: 30%; left: 10%; } .star:nth-child(2) { top: 50%; right: 10%; } .star:nth-child(3) { top: 70%; left: 30%; } .star:nth-child(4) { top: 20%; right: 20%; } .star:nth-child(5) { top: 60%; left: 50%; } .star:nth-child(6) { top: 15%; left: 80%; } .star:nth-child(7) { top: 80%; left: 70%; } .star:nth-child(8) { top: 10%; left: 90%; } .star:nth-child(9) { top: 90%; right: 5%; }
上述代码中,大家使用了CSS3的@keyframes属性和animation属性来生成星星动画效果,同时也设置了星星的样式以及位置,最终实现了闪烁的星空效果。
大家只需要将上述代码复制到HTML文件的标签或者单独的CSS文件中,然后在对应的HTML代码中添加星星的
标签即可看到效果。