前言：最近看到好多寫圣誕樹的，我這個前端小白也想湊個熱鬧，自己寫了個小頁面，祝我們圣誕快樂，平平安安！
話不多說，放個效果圖：
上代碼：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣誕快樂</title>
<!-- 小奶熊樣式 -->
<link rel="stylesheet" href="style.css">
<style>
html body {
margin: 0;
padding: 0;
}
/* 整個容器 */
.container {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
background-image: linear-gradient(to right, #0b281C, #386455);
}
/* 圣誕樹 */
.tree {
display: inline-block;
position: relative;
width: 600px;
height: 800px;
}
.tree img {
position: absolute;
right: 0;
bottom: 0;
}
/* 圣誕老人和輸入框 */
.main {
position: absolute;
display: inline-block;
bottom: 0;
}
.main img {
position: absolute;
left: -100px;
bottom: -50px;
width: 400px;
height: 400px;
}
.main .item {
position: absolute;
width: 500px;
left: 210px;
bottom: 60px;
}
.main input {
width: 300px;
height: 40px;
border: none;
border-radius: 7px;
padding-left: 10px;
}
input:focus {
outline: none;
}
.main button {
width: 80px;
height: 40px;
border: none;
background-color: #B01C10;
border-radius: 8px;
color: white;
cursor: pointer;
}
button:hover {
background-color: rgb(139, 19, 19);
}
/* 右側 */
.picture {
position: absolute;
top: 0;
right: 0;
}
/* 右側卡牌 */
.card img {
position: absolute;
width: 300px;
height: 300px;
top: 200px;
right: 200px;
}
/* 飄雪收集 */
.collection {
width: 100%;
height: 20px;
background-color: #A61212;
}
</style>
</head>
<body>
<!-- 頁面效果 -->
<div class="container">
<div class="tree">
<img src="imgs/樹.png" />
</div>
<div class="main">
<img src="imgs/圣誕老人.png" />
<div class="item">
<input type="text" placeholder="請輸入你的愿望" id="hope" />
<button id="btn">發送</button>
</div>
</div>
<div class="picture">
<img src="imgs/picture.png" />
</div>
<div class="card" id="card">
<img src="imgs/card.png" />
</div>
</div>
<!-- 雪花效果 底部收集-->
<div class="collection"></div>
<!-- 禮盒效果 -->
<div class="present" id="bong">
<div class="teddy-santa-hat">
<div class="teddy-santa-hat-part"></div>
</div>
<div class="teddy-bear">
<div class="bear-left-ear"></div>
<div class="bear-right-ear"></div>
<div class="bear-left-eye"></div>
<div class="bear-right-eye"></div>
<div class="bear-nose"></div>
<div class="bear-mouth"></div>
</div>
<div class="box-lid">
<div class="box-top-lid"></div>
<div class="box-left-lid"></div>
<div class="box-front-lid"></div>
<div class="box-right-lid"></div>
<div class="box-back-lid"></div>
</div>
<div class="box">
<div class="box-left"></div>
<div class="box-front"></div>
</div>
<div class="back-box-cover">
<div class="box-right"></div>
<div class="box-back"></div>
</div>
<div class="tree-left"></div>
<div class="tree-right"></div>
</div>
</body>
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<!-- 匯入雪花插件 -->
<script type="text/javascript" src="./snowfall.jquery.js"></script>
<script type="text/javascript">
//飄雪效果
$('.container').snowfall({
image: "imgs/雪花.png",
minSize: 10,
maxSize: 32
});
$(document).snowfall({
collection: '.collection',
flakeCount: 250
});
//顯示
$('#btn').click(function () {
//顯示禮物小奶熊
$('#bong').toggle();
//顯示愿望
var inner = $("input").val();
$("<span></span>").appendTo(".container");
$("span").text(inner).css({
'color': '#A61212',
'font-size': '50px',
'font-family': 'serif',
'font-style': 'italic',
'position': 'absolute',
'top': "150px",
'left': '420px'
})
// 清空input里的值
$("input").val("");
});
//監聽鍵盤事件
$(document).keyup(function (event) {
if (event.keyCode == 13) {
$("#btn").trigger("click");
}
});
</script>
</html>圖片：
雪花：
結語：因為我里面的雪花效果用了插件，還有一些圖片及禮物小熊樣式，我把壓縮包放在資源里了，喜歡就點個贊吧，嘻嘻，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/387813.html
標籤：其他