HTML5 小练习2—仿华为官网（实现随机雪花飘落效果）

文章目录

一、界面展示
二、突出显示效果（当鼠标指向时）
- 1.广告部分动画
- 2.商品价格突出显示
- 3.导航栏文字突出显示
三、项目目录
四、CSS样式代码
- 1.雪花部分实现
五、页面代码
- 1.index.html

实现网站结构的基本搭建，以及部分模块的突出显示效果和动画效果，重点：实现随机雪花飘落效果。

代码源文件
链接：https://pan.baidu.com/s/1QSPrO_SEFxS4iTXdSeflWw?pwd=HWWA
提取码：HWWA

一、界面展示

二、突出显示效果（当鼠标指向时）

1.广告部分动画

2.商品价格突出显示

3.导航栏文字突出显示

三、项目目录

四、CSS样式代码

1.雪花部分实现

在项目中添加一张雪花的图片，通过设置雪花图片不同的宽高来实现不同大小的雪花，设置图片初始出现的位置，然后设置雪花图片的不同动画效果，来实现雪花的飘动。

animation-duration （用来设置动画播放所需的时间）
animation-iteration-count （用来指定动画播放的循环次数）
animation-timing-function（用来设置动画的播放方式）：
速度由快到慢，然后逐渐变慢：ease
速度越来越快，呈现加速状态：ease-in
速度越来越慢，呈现一种减速状态：ease-out
先加速，在减速：ease-in-out
匀速状态：linear
自定义(三段赛贝尔曲线)：cubic-bezier

         #xuehua {position: fixed;top: 0px;left: 0px;height: 20px;width: 20px;z-index: 99;animation-duration: 30s;animation-iteration-count: infinite;animation-timing-function: linear;}#xuehua1 {position: fixed;top: 2px;left: 10%;height: 25px;width: 25px;z-index: 99;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: ease;}#xuehua2 {position: fixed;top: 2px;left: 20%;height: 15px;width: 15px;z-index: 99;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: ease-in;}#xuehua3 {position: fixed;top: 2px;left: 30%;height: 35px;width: 35px;z-index: 99;animation-duration: 40s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#xuehua4 {position: fixed;top: 2px;left: 40%;height: 20px;width: 20px;z-index: 99;animation-duration: 35s;animation-iteration-count: infinite;animation-timing-function: ease-out;}#xuehua5{position: fixed;top: 2px;left: 50%;height: 35px;width: 35px;z-index: 99;animation-duration: 28s;animation-iteration-count: infinite;animation-timing-function: step-start;}#xuehua6{position: fixed;top: 1px;left: 60%;height: 23px;width: 23px;z-index: 99;animation-duration: 25s;animation-iteration-count: infinite;animation-timing-function: ease-in;}#xuehua7{position: fixed;top: 2px;left: 70%;height: 33px;width: 33px;z-index: 99;animation-duration: 35s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#xuehua8{position: fixed;top: 2px;left: 80%;height: 20px;width: 20px;z-index: 99;animation-duration: 45s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#xuehua9{position: fixed;top: 2px;left: 95%;height: 40px;width: 40px;z-index: 99;animation-duration: 50s;animation-iteration-count: infinite;animation-timing-function: ease-out;}

五、页面代码

1.index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">* {margin: 0;padding: 0;list-style-type: none;}#body {margin: 0 auto;position: relative;width: 100%;height: 1600px;border: 1px solid red;}#logo {width: auto;height: 50px;}#title {position: relative;top: 15px;height: 50px;width: 1350px;margin: 0 auto;}#title div {float: left;}#title_logo {text-align: center;line-height: 50px;float: left;height: 50px;width: auto;}#title_logo,#title_text {margin-left: 20px;}#title_text ul {display: flex;justify-content: space-evenly;width: 500px;}#title_text ul li {height: 50px;border-bottom: 2px solid white;text-align: center;line-height: 60px;float: left;}#title_text ul li:hover {color: #aa0000;border-bottom: 2px solid #AA0000;}#title_search {margin-top: 15px;margin-left: 150px;height: 30px;width: 350px;}#search_border {border: 0px;height: 30px;width: 350px;text-align: center;line-height: 30px;border-radius: 25px 25px;background-color: #f1f3f4;}#search_border ul {margin-left: 55px;}#search_border ul li {float: left;margin-left: 10px;font-size: 10px;color: #ada8a8;}#search_border ul li:hover {color: black;}#banner img {border-radius: 10px;width: 100%;height: auto;margin-top: 30px;}#banner img:hover {border-radius: 30%;transition-duration: 3s;transition-timing-function: linear;}#gift {position: relative;top: -5px;background-color: #f9f2fa;height: 700px;}#gift_top img {width: 100%;height: auto;}.gift_but {font-size: 15px;position: absolute;bottom: 0px;color: white;background-color: #e1342b;border-radius: 15px 15px 15px 0;}.gift_text {height: 200px;width: 336px;text-align: center;background-color: white;}.text_but {color: white;font-weight: bold;font-size: 25px;line-height: 40px;margin: 0 auto;height: 40px;border-radius: 25px;width: 150px;background-color: #1d1d1d;}.text_but:hover {background-color: #ffaa7f;}#gift_bottom {width: 1424px;height: 500px;margin: 0 auto;}#gift_bottom dl {float: left;padding: 10px;}#gift_bottom dd {position: relative;width: 336px;height: 336px;background-color: #ebeef3;}#gift_bottom dd img {width: 336px;height: 336px;}#gift_bottom dt {padding-top: 20px;height: 120px;width: 336px;text-align: center;background-color: white;}#foot {position: relative;/* top: -5px; */background-color: #f9f2fa;height: ;}#foot_top img {width: 100%;height: auto;}#foot_bottom {margin: 0 auto;background-image: url(img/foot.png);background-size: cover;border-radius: 10px;width: 80%;height: 200px;}#foot_text {position: relative;/* border: 1px solid red; */text-align: center;padding-top: 40px;height: 160px;width: 500px;}#foot_text h1 {font-size: 25px;}#foot_text p {margin: 5px;display: inline-block;font-weight: normal;}#foot_time {font-size: 20px;font-weight: bold;color: #636363;margin: 0 auto;line-height: 30px;height: 30px;width: 150px;border-radius: 15px;background-color: white;}#ms:hover {transition-duration: 2s;transition-timing-function: inherit;border-radius: 15px;font-size: 30px;transform: rotate(360deg);}#foot_time:hover {background-color: #ffaa7f;color: white;}#ms {font-size: 30px;color: #d40000;}#rc {text-decoration: line-through;}.xh {background-image: url(./img/xuehua.png);background-repeat: round;animation-name: test;}.xh1 {background-image: url(./img/xuehua.png);background-repeat: round;animation-name: test1;}.xh2 {background-image: url(./img/xuehua.png);background-repeat: round;animation-name: test2;}.xh3 {background-image: url(./img/xuehua.png);background-repeat: round;animation-name: test3;}.xh4 {background-image: url(./img/xuehua.png);background-repeat: round;animation-name: test4;}#xuehua {position: fixed;top: 0px;left: 0px;height: 20px;width: 20px;z-index: 99;animation-duration: 30s;animation-iteration-count: infinite;animation-timing-function: linear;}#xuehua1 {position: fixed;top: 2px;left: 10%;height: 25px;width: 25px;z-index: 99;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: ease;}#xuehua2 {position: fixed;top: 2px;left: 20%;height: 15px;width: 15px;z-index: 99;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: ease-in;}#xuehua3 {position: fixed;top: 2px;left: 30%;height: 35px;width: 35px;z-index: 99;animation-duration: 40s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#xuehua4 {position: fixed;top: 2px;left: 40%;height: 20px;width: 20px;z-index: 99;animation-duration: 35s;animation-iteration-count: infinite;animation-timing-function: ease-out;}#xuehua5{position: fixed;top: 2px;left: 50%;height: 35px;width: 35px;z-index: 99;animation-duration: 28s;animation-iteration-count: infinite;animation-timing-function: step-start;}#xuehua6{position: fixed;top: 1px;left: 60%;height: 23px;width: 23px;z-index: 99;animation-duration: 25s;animation-iteration-count: infinite;animation-timing-function: ease-in;}#xuehua7{position: fixed;top: 2px;left: 70%;height: 33px;width: 33px;z-index: 99;animation-duration: 35s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#xuehua8{position: fixed;top: 2px;left: 80%;height: 20px;width: 20px;z-index: 99;animation-duration: 45s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}#xuehua9{position: fixed;top: 2px;left: 95%;height: 40px;width: 40px;z-index: 99;animation-duration: 50s;animation-iteration-count: infinite;animation-timing-function: ease-out;}@keyframes test {20% {position: fixed;top: 20%;left: 5%;}40% {position: fixed;top: 40%;left: 15%;}60% {position: fixed;top: 60%;left: 20%;}80% {position: fixed;top: 80%;left: 13%;}100% {position: fixed;top: 100%;left: 7%;}}@keyframes test1 {20% {position: fixed;top: 20%;left: 25%;}40% {position: fixed;top: 40%;left: 35%;}60% {position: fixed;top: 60%;left: 40%;}80% {position: fixed;top: 80%;left: 30%;}100% {position: fixed;top: 100%;left: 25%;}}@keyframes test2 {20% {position: fixed;top: 20%;left: 45%;}40% {position: fixed;top: 40%;left: 50%;}60% {position: fixed;top: 60%;left: 55%;}80% {position: fixed;top: 80%;left: 60%;}100% {position: fixed;top: 100%;left: 40%;}}@keyframes test3 {20% {position: fixed;top: 20%;left: 65%;}40% {position: fixed;top: 40%;left: 73%;}60% {position: fixed;top: 60%;left: 80%;}80% {position: fixed;top: 80%;left: 63%;}100% {position: fixed;top: 100%;left: 70%;}}@keyframes test3 {20% {position: fixed;top: 20%;left: 80%;}40% {position: fixed;top: 40%;left: 90%;}60% {position: fixed;top: 60%;left: 100%;}80% {position: fixed;top: 80%;left: 80%;}100% {position: fixed;top: 100%;left: 100%;}}@keyframes test4 {20% {position: fixed;top: 20%;left: 100%;}40% {position: fixed;top: 40%;left: 90%;}60% {position: fixed;top: 60%;left: 80%;}80% {position: fixed;top: 80%;left: 93%;}100% {position: fixed;top: 100%;left: 100%;}}</style></head><body><div id="body"><div id="title"><div id="title_logo"><div><img src="img/Logo.png" id="logo" /></div><div><h2> &nbsp;|&nbsp;华为专区</h2></div></div><div id="title_text"><ul><li>手机</li><li>笔记本电脑</li><li>平板&穿戴</li><li>智能家居</li><li>配件</li><li>企业购</li></ul></div><div id="xuehua" class="xh"></div><div id="xuehua1" class="xh"></div><div id="xuehua2" class="xh1"></div><div id="xuehua3" class="xh1"></div><div id="xuehua4" class="xh2"></div><div id="xuehua5" class="xh2"></div><div id="xuehua6" class="xh3"></div><div id="xuehua7" class="xh3"></div><div id="xuehua8" class="xh4"></div><div id="xuehua9" class="xh4"></div><div id="title_search"><div id="search_border"><ul><li>HUEWEI P40</li><li>HUEWEI FreeBuds Pro</li></ul></div></div></div><div id="banner"><img src="img/banner.jpg" /></div><div id="gift"><div id="gift_top"><img src="img/songlijiapin.jpg" /></div><div id="gift_bottom"><dl><dd><img src="img/tuijian1.png" /><div class="gift_but">享6期免息</div></dd><dt><h2>HUAWEI Mate 30E Pro</h2><p>麒麟990E 5G旗舰SoC芯片</p><p class="text_but">￥5299起</p></dt></dl><dl><dd><img src="img/tuijian2.png" /><div class="gift_but">订购立省20元</div></dd><dt><h2>华为路由WS5200增强版</h2><p>双千兆 任速度纵情飞驰</p><p class="text_but">￥159</p></dt></dl><dl><dd><img src="img/tuijian3.png" /><div class="gift_but">享3期免息</div></dd><dt><h2>HUAWEI P40</h2><p>麒麟990E 5G SoC芯片</p><p class="text_but">￥4988</p></dt></dl><dl><dd><img src="img/tuijian4.png" /><div class="gift_but">购机赠耳机</div></dd><dt><h2>华为畅享20 5G</h2><p>5000mAh大电池</p><p class="text_but">￥1499起</p></dt></dl></div></div><div id="foot"><div id="foot_top"><img src="img/xianshimiaosha.jpg" /></div><div id="foot_bottom"><div id="foot_text"><h1>15W 无线充套装</h1><center><p>秒杀价</p><p id="ms">￥9.9</p><p id="rc">日常价:￥249</p></center><div id="foot_time">每天10:00</div></div></div></div></div></div></body>
</html>

HTML5 小练习2—仿华为官网（实现随机雪花飘落效果）相关推荐

HTML5+CSS3实现华为官网
一.前言对于华为官网是自学时做的一个作品,想要学习的小伙伴,可以借鉴的,一下我会展示效果图和部分代码. (注:此次做了华为的一系列网页,可以前往我的主页进行查看) 二.效果成品图三.代码展示(为部 ...
html5雪花飘落,使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码代码如下: function start(){ var array=new Array(); var canvas=document.g ...
HTML5 小练习1—仿MPG游戏商城
实现网页界面的全部搭建,已经部分突出显示功能,当鼠标移动到指定区域时,突出显示当前部分,有放大显示,突出显示,高亮显示以及添加阴影等效果. 项目源文件链接:https://pan.baidu.com ...
华为官网鸿蒙系统手机安装链接,华为鸿蒙系统手机版
华为鸿蒙系统手机版公测版下载确定时延引擎让系统更加流畅,具有非常优秀的Linux桌面操作系统,包括华为手机,不妨来下载试试看吧. 华为鸿蒙系统手机版软件介绍华为华为鸿蒙系统手机版是基于Linux内核 ...
Vue复刻华为官网 (一)
1 分析根据华为网页的布局,我们大体上可以将其划分为7个盒子,如下,由于写一个这样的网页再加上部分动态效果,需要的时间很长,本篇博客只记录了div1.div2.div3的静态效果+轮播图的实现. 2 ...
html华为官网静态网页,Web静态页面：华为商城主页
华为商城主页(Web静态页面) 这是我的第一篇博客,主要分享一下期末大作业:华为商城主页,只涉及静态页面. 结构框架: 华为商城首页,根据每个部分的功能,可以将整个页面分为三部分: 头部header. ...
收到华为官网鸿蒙的消息,IT之家用户反馈现已收到华为鸿蒙 HarmonyOS 2.0 推送
IT之家 4 月 28 日消息感谢IT之家网友热心线索投递,部门华为用户现已收到鸿蒙 OS 2.0 开发者 Beta 公测版推送. 此次更新并未透露太多更新内容,更新包体积约 5.88GB,我们后续 ...
学习写华为官网网页的心得
1.在写华为主页时我主要用到了无序列表li,div,a这几个 2.使用div将主页分成块,每一个区域在自己所需的区域工作,在div中添加类名class,引用类名对其进行相关修饰,比如该快的宽度,长度, ...
因为没有直接看华为官网的注释，一味地在尝试在华为畅享9 plus装google play
前后浪费了好几个小时,才想起来查一下这款手机支不支持google play,教训是:应该第一时间查是否可以安装,减少损失事件!! https://consumer.huawei.com/cn/supp ...