📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️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.视频演示
87-守护爱情(泡泡游戏)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>泡泡</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="con-index">
<img alt="" src="images/indexshow.jpg" width="100%">
<a class="startbtn" href="chooselove.html"></a>
</div>
</body>
</html>
🏠CSS样式代码
width: 180px;
height: 180px;
background: url("../images/kongpao2.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
top: -5px;
left: -5px;
overflow: hidden;
}
.con-play .lovepao {
display: block;
width: 170px;
height: 170px;
background: url("../images/lovecao02.png") no-repeat left 20px top 20px;
background-size: 100% 100%;
border-radius: 85px;
position: absolute;
top: 30%;
left: 24%;
overflow: hidden;
}
.con-play .hidpao {
display: block;
position: absolute;
width: 60px;
height: 60px;
border-radius: 30px;
overflow: hidden;
}
.con-play .returnbtn {
display: block;
width: 60px;
height: 60px;
background: url("../images/return.png") no-repeat center;
background-size: 100% 100%;
overflow: hidden;
position: absolute;
left: 30px;
bottom: 40px;
}
.con-play .whatbtn {
display: block;
width: 60px;
height: 60px;
background: url("../images/what.png") no-repeat center;
background-size: 100% 100%;
overflow: hidden;
position: absolute;
right: 30px;
bottom: 40px;
}
.con-play .hid01 {
position: absolute;
top: 230px;
left: 31px;
background: url("../images/hidpao_01.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .hid01po {
position: absolute;
top: 230px;
left: 31px;
background: url("../images/konghidpao.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .hid02 {
position: absolute;
top: 421px;
left: 89px;
background: url("../images/hidpao_02.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .hid03 {
position: absolute;
top: 295px;
left: 244px;
background: url("../images/hidpao_04.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .hid04 {
position: absolute;
top: 20px;
left: 100px;
background: url("../images/hidpao_04.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .greybg {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #333333;
opacity: 0.7;
z-index: 9999;
}
.con-play .tan {
position: absolute;
top: 50%;
left: 50%;
margin-top: -178px;
margin-left: -134px;
width: 270px;
height: 400px;
z-index: 99999;
}
.con-play .ok {
display: none;
background: url("../images/tanok.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .fos {
display: none;
background: url("../images/tanfls.png") no-repeat center;
background-size: 100% 100%;
}
.con-play .btn-share {
display: block;
width: 100px;
height: 40px;
background: url("../images/btnshare.png") no-repeat center;
background-size: 100% 100%;
margin-left: 146px;
margin-top: 337px;
}
.con-play .btn-play {
display: block;
width: 100px;
height: 40px;
background: url("../images/btnplay.png") no-repeat center;
background-size: 100% 100%;
margin-left: 20px;
margin-top: -40px;
}
.con-play .tanlovepao {
display: block;
width: 140px;
height: 140px;
border-radius: 70px;
position: absolute;
top: 22%;
left: 23%;
}
.con-play .tanflspao {
display: block;
width: 170px;
height: 170px;
background: url("../images/konghidpao.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
.con-play .tantime {
position: absolute;
top: 22px;
left: 57px;
font-size: 60px;
color: #EA5984;
}
.con-play .sharetan {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999999999;
}
/**兼容**/
/**33**/
@keyframes {
0% {
margin-left: 17px;
}
100% {
margin-left: 15px;
}
}
@-moz-keyframes hidp03
/* Firefox */
{
0% {
margin-left: 17px;
}
100% {
margin-left: 15px;
}
}
@-webkit-keyframes hidp03
/* Safari 和 Chrome */
{
0% {
margin-left: 17px;
}
100% {
margin-left: 15px;
}
}
@-o-keyframes hidp03
/* Opera */
{
0% {
margin-left: 17px;
}
100% {
margin-left: 15px;
}
}
