❤ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业: 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式:【HTML七夕情人节表白网页制作 (125套) 】
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!
网站文件方面:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
网页编辑方面:可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;
(2) css文件包含:css全部页面样式,3D动态效果,雪花飘落等等
(3) js文件包含:页面炫酷效果实现
63-生日快乐动画(音乐)
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>别不快乐生日快乐!title>
<link rel='stylesheet' href='css/style.css' />
<link rel='stylesheet' href='css/pageA.css' />
<link rel='stylesheet' href='css/pageB.css' />
<link rel='stylesheet' href='css/pageC.css' />
<script type="text/javascript" src="js/query.js">script>
<script type="text/javascript" src="js/transit.js">script>
<script type="text/javascript" src="js/HappyBirth.js">script>
head>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background">
<div class="a_background_top">div>
<div class="a_background_middle">div>
<div class="a_background_botton">div>
div>
<div class="cloudArea">
<div class="cloud cloud1">div>
<div class="cloud cloud2">div>
div>
<div id="sun">div>
li>
<li>
<div class="b_background">div>
<div class="b_background_preload">div>
<div class="shop">
<div class="door">
<div class="door-left">div>
<div class="door-right">div>
div>
<div class="lamp">div>
div>
<div class="bird">div>
li>
<li>
<div class="c_background">
<div class="c_background_top">div>
<div class="c_background_middle">div>
<div class="c_background_botton">div>
div>
<div class="girl">div>
<div class="bridge-bottom">
<div class="water">
<div id="water1" class="water_1">div>
<div id="water2" class="water_2">div>
<div id="water3" class="water_3">div>
<div id="water4" class="water_4">div>
div>
div>
<ul class="stars">
<li class="stars1">li>
<li class="stars2">li>
<li class="stars3">li>
<li class="stars4">li>
<li class="stars5">li>
<li class="stars6">li>
ul>
<div class="logo">div>
li>
ul>
<div id="snowflake">div>
<div id="boy" class="charector">div>
div>
body>
html>
.a_background {
width: 100%;
height: 100%;
position: absolute
}
.a_background_top {
width: 100%;
height: 71.6%;
background-image:url(../images/a/a_background_top.png);
background-size: 100% 100%
}
.a_background_middle {
width: 100%;
height: 13.1%;
background-image:url(../images/a/a_background_middle.png);
background-size: 100% 100%
}
.a_background_botton {
width: 100%;
height: 15.3%;
background-image:url(../images/a/a_background_botton.png);
background-size: 100% 100%
}
.cloud {
z-index: 2;
position: absolute
}
.cloud1 {
width: 100%;
height: 30%;
left: -5%;
top: 15%;
background:url(../images/cloud/cloud1.png) no-repeat;
-webkit-animation-name: smallCloud;
-webkit-animation-duration: 30s;
-webkit-animation-iteration: infinite;
-moz-animation-name: smallCloud;
-moz-animation-duration: 30s;
-moz-animation-iteration: infinite
}
.cloud2 {
width: 100%;
height: 100%;
right: -5%;
background:url(../images/cloud/cloud2.png) no-repeat;
-webkit-animation-name: largeCloud;
-webkit-animation-duration: 50s;
-webkit-animation-iteration: infinite;
-moz-animation-name: largeCloud;
-moz-animation-duration: 50s;
-moz-animation-iteration: infinite
}
@-webkit-keyframes smallCloud {
0% {
left: -5%
}
100% {
left: 100%
}
}
@-moz-keyframes smallCloud {
0% {
left: -5%
}
100% {
left: 100%
}
}
@-webkit-keyframes largeCloud {
0% {
right: -5%
}
100% {
right: 100%
}
}
@-moz-keyframes largeCloud {
0% {
right: -5%
}
100% {
right: 100%
}
}
#sun {
background:url(../images/sun.png) no-repeat;
position: absolute;
z-index: 1;
top: -30px;
height: 201px;
width: 201px;
right: 100px;
-webkit-transform: rotate(45deg);
-webkit-animation-name: rotation;
-webkit-animation-duration: 60s;
-webkit-animation-iteration: 1;
-webkit-animation-fill-mode: forwards;
-moz-transform: rotate(45deg);
-moz-animation-name: rotation;
-moz-animation-duration: 60s;
-moz-animation-iteration: 1;
-moz-animation-fill-mode: forwards
}
@-webkit-keyframes rotation {
0% {
transform: translateX(0) translateY(0) rotate(45deg)
}
100% {
transform: translateX(-2000px) translateY(400px) rotate(70deg)
}
}
@-moz-keyframes rotation {
0% {
transform: translateX(0) translateY(0) rotate(45deg)
}
100% {
transform: translateX(-2000px) translateY(400px) rotate(70deg)
}
}
1.如果我的博客对你有帮助 请 “点赞” “✍️评论” “收藏”
一键三连哦!
2.【关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
以上内容技术相关问题欢迎一起交流学习