今天刚学的用JS和CSS3制作星星海特效
图片自己用PS简单做的一个星星,png格式
js代码中有必要的步骤注释
主要用到了随机函数,这个很重要,它让界面变得很炫,不是单调的闪烁,星星的变化主要是透明度和大小,动画展开时间不一样,设置了推迟时间,鼠标放到上面还会旋转放大。
另外我在学习的基础上更加完善了代码,在浏览器窗口缩放的同时,星星海特效会再次刷新,以便适应不同大小的屏幕,用户体验更加友好(试了很多次,还遇到bug,还好测试成功,还有是在火狐浏览器测试的)
直接复制可以运行,首先准备一张png格式的星星图片,建立一个名为img的文件夹,不要修改、写错路径或者建错文件夹哦~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星星海特效</title>
<style>
body{
background: #000;
overflow: hidden;
}
span{
display: block;
width: 20px;
height: 20px;
position: absolute;
background: url(img/1.png) center center / 20px 20px;
animation: flash 1s alternate infinite;
}
@keyframes flash{
0%{ opacity: 0; }