源代码链接：https://pan.baidu.com/s/1Zis5IzHOvFQAiJ-SGkvjrw
提取码：qiec
前言
本文是采用html,css,js编写的
提示：以下是本篇文章正文内容，下面案例可供参考
一、项目实战
品优购采用和京东同样的base.css文件因为小编比较懒，直接复制粘贴了
左上角品优购标志位动态，所以截图的不是正中间
二、使用步骤
1.导航栏html代码
代码如下：
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品邮购欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html"class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> <a href="dd.html" class="style_blue"> 我的订单（别点我）</a></li>
<li></li>
<li class="arrow-icon">我的品邮购</li>
<li></li>
<li>品邮购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注品邮购</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="asd">
网站导航
<div class="bh">
<ul class="nh">
<li style="float:right; width:100px;"><a href="index.html">返回首页</a></li>
<li style="float:right; width:100px;"><a href="register.html">前往登录界面</a></li>
</ul>
</div>
</li>
</ul>
<!-- <div1 class="daohang">nihao</div1> -->
</div>
</div>
</section>
具体css代码可下载源代码自由查看
2.小火箭以及后面的光线html和js代码
代码如下：
<title>火箭升空</title>
<link rel="stylesheet" href="css/hh.css">
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共的样式文件 -->
<script src="js/zuoye.js"></script>
</head>
<body>
<div class="container">
<div class="xxzp">
<a href="index.html">
<img src="images/lbxxtx2.png" alt="">
</a>
</div>
<div class="rocket">
<a href="index.html"> <img src="images/hj.png" alt=""></a>
</div>
</div>
<script>
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1)) + m-1;
}
// 光线总数
let num = 100;
// 循环
for(let i=0;i<num;i++){
// 创建i元素
const i = document.createElement('i');
// 设置样式
i.style.height = rand(30,100) + 'px';
i.style.left = rand(1,99) + 'vw';
// 随机动画周期
i.style.animationDuration = rand(5,30) / 10 + 's';
// 将i插入到container 元素中
document.querySelector('.container').appendChild(i);
}
</script>
代码方面数据可以改变后面小li的速度
总结
小编很懒有问题可以提出，看见会回答