七夕给女朋友准备的小惊喜网站制作(html+css+js)

❤ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业: 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式:【HTML七夕情人节表白网页制作 (125套) 】
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!


文章目录

  • 二、网站介绍
  • 三、网站效果
    • ▶️1.视频演示
    • 2.图片演示
  • 四、 网站代码
    • HTML结构代码
    • CSS样式代码
  • 五、更多源码


二、网站介绍

网站文件方面:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

网页编辑方面:可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;
(2) css文件包含:css全部页面样式,3D动态效果,雪花飘落等等
(3) js文件包含:页面炫酷效果实现


三、网站效果

▶️1.视频演示

63-生日快乐动画(音乐)

2.图片演示

在这里插入图片描述


四、 网站代码

HTML结构代码


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>



CSS样式代码



.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模板 、等!

以上内容技术相关问题欢迎一起交流学习

你可能感兴趣的:(网页设计与制作,css,html,javascript,前端)