文章目录
一、界面展示二、突出显示效果（当鼠标指向时）1.广告部分动画2.商品价格突出显示3.导航栏文字突出显示 三、项目目录四、CSS样式代码1.雪花部分实现 五、页面代码1.index.html实现网站结构的基本搭建，以及部分模块的突出显示效果和动画效果，重点：实现随机雪花飘落效果。
代码源文件
链接：/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> | 华为专区</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>
📢欢迎点赞👍 收藏🌟 留言💬
📢单纯分享日常中的小练习，技术有限，如果发现有错欢迎指导
