时间:2023-10-07 20:24:02 | 来源:网站运营
时间:2023-10-07 20:24:02 来源:网站运营
致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载:精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业: 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式:【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码:【 Echarts大屏展示大数据平台可视化(150套) 】 HTML+CSS+JS实例代码: 【 ️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中...】 免费且实用的WEB前端学习指南: 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 坚持原创,热衷分享,初心未改,继往开来!
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1) html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>FirstPage</title> <style> body{ background-image: url(images/精彩瞬间/insert3.jpg); background-size: 100% 100%; background-attachment: fixed; } .header{ width: 100%; height: 175px; background-color: #111; box-shadow: 10px 10px 20px #111; } a{ width: 150px; height: 150px; display: block; /*background:linear-gradient(lightskyblue,blueviolet);*/ background-image: url(images/心得体会/bg1.gif); border-radius: 50%; text-align: center; color: #00FF40; text-shadow: 2px 2px 1px #000; font:700 28px/150px 华文行楷; text-decoration: none; position: absolute; top: 30px; left: 30px; box-shadow: 17px 10px 20px blueviolet inset; } a:hover{ top:25px; box-shadow: 8px 8px 30px lightskyblue; transition: 0.3s; } #container{ width:200px; height: 200px; /*border:1px solid #fff;*/ /*background-color: #000;*/ margin:10px auto; position: relative; top: 10px; } #fireworks1{ position: absolute; left: 50%; margin-left: -150px; bottom: 60%; margin-bottom: -200px; transform: scale(0); animation: fireworks 5s 0.5s; } #fireworks1>img{ width: 400px; height: 400px; } #fireworks{ position: absolute; left: 50%; margin-left: 110px; bottom: 60%; margin-bottom: -130px; transform: scale(0); animation: fireworks 5s 2s; } #fireworks>img{ width: 280px; height: 280px; } #fireworks2{ position: absolute; left: 50%; margin-left: -260px; bottom: 60%; margin-bottom: -150px; transform: scale(0); animation: fireworks 5s 4s; } #fireworks2>img{ width: 300px; height: 300px; } #fireworks3{ position: absolute; left: 50%; margin-left: -160px; bottom: 60%; margin-bottom: -130px; transform: scale(0); animation: fireworks 5s 6s; } #fireworks3>img{ width: 250px; height: 250px; } @keyframes fireworks { 0%{ transform: scale(0); } 80%{ transform: scale(1); } 100%{ opacity: 0; } } @keyframes fireworks1 { 0%{ transform: scale(0); } 80%{ transform: scale(1); } 100%{ opacity: 0; } } @keyframes fireworks2{ 0%{ transform: scale(0); } 80%{ transform: scale(1); } 100%{ opacity: 0; } } @keyframes fireworks3{ 0%{ transform: scale(0); } 80%{ transform: scale(1); } 100%{ opacity: 0; } } </style></head><body><div id="container"> <div id="fireworks"><img src="images/fireworks/fir3.png" alt=""></div> <div id="fireworks1"><img src="images/fireworks/fir1.png" alt=""></div> <div id="fireworks2"><img src="images/fireworks/fir1.png" alt=""></div> <div id="fireworks3"><img src="images/fireworks/fir2.png" alt=""></div><!-- <div id="firecracker"><img src="images/fireworks/firecracker.png" alt="" width="8px"></div>--></div><a href="homep.html" target="_blank">进入主页</a></body></html>
请 “ 点赞” “✍️评论” “ 收藏”
一键三连哦! 【 关注我| 获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!关键词:设计,作业,专题,模板,疫情,逆行,作品,感动