web网页设计实例作业 ——抗疫-逆行者(5页) 致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
- web网页设计实例作业 ——抗疫-逆行者(5页) 致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!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>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
DIV布局 web网页设计实例作业 ——抗疫-逆行者(5页) 致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
发布评论