新的一年到了，小超祝大家在新的一年开开心心，财源滚滚哈，也希望新的一年多多支持这个平台哈哈，我也会在悠闲的时间写一篇博客，作为新年礼物，用HTML加CSS加JAVAScrpit做了一份新年祝福语录哈，
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="湖南小超">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>前端小超创作</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.main {
width: 100%;
height: 100%;
max-width: 540px;
position: relative;
margin: 0 auto;
}
.firework {
position: absolute;
z-index: 998;
top: 0;
left: 0;
}
.firework2 {
position: absolute;
z-index: 998;
bottom: 0;
right: 0;
}
.outer {
position: absolute;
z-index: 999;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
canvas {
position: absolute;
z-index: 999;
top: 0;
left: 0;
}
.bgm {
position: absolute;
z-index: 1000;
width: 38px;
height: 38px;
right: 16px;
top: 16px;
cursor: pointer;
background: url(./img/bgm.svg) no-repeat center center;
background-size: contain;
}
.bgm.rotate {
animation: rotating 1.2s linear infinite;
}
@keyframes rotating {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
.box {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.page {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: url(./img/bg.webp) no-repeat center center;
background-size: cover;
}
.page.active {
z-index: 3;
}
.page.current {
z-index: 2;
}
.page img {
position: absolute;
z-index: -1;
}
.img1 {
top: 30%;
left: 50%;
width: 90%;
transform: translateX(-50%);
}
.img2 {
width: auto;
top: -10%;
right: -10%;
}
.word {
width: 100%;
color: rgb(240, 195, 141);
text-align: center;
line-height: 1.2;
font-size: 102px;
opacity: 0;
position: absolute;
left: 50%;
margin-left: -50%;
top: 40%;
margin-top: -50%;
}
.page.active .word {
opacity: 0;
}
.page.current .left-in {
animation: lefteasein 1.5s ease 1;
}
.page.current .left-turn-in {
animation: leftturnin 1.5s ease 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.page.current .right-in {
animation: righteasein 1.5s ease 1;
}
.page.current .top-in {
animation: topeasein 1.5s ease 1;
}
.page.current .bottom-in {
animation: bottomeasein 1.5s ease 1;
}
.page.current .big-in {
animation: bigeasein 1.5s ease 1;
}
.page.current .small-in {
animation: smalleasein 1.5s ease 1;
}
.word2 {
animation-delay: 1.5s !important;
}
.word3 {
animation-delay: 3s !important;
}
.word4 {
animation-delay: 4.5s !important;
}
.word5 {
animation-delay: 6s !important;
}
.word6 {
animation-delay: 7.5s !important;
}
.word7 {
animation-delay: 9s !important;
}
@keyframes lefteasein {
0% {
transform: translateX(-500px);
opacity: 0;
}
80% {
transform: translateX(0px);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes leftturnin {
0% {
transform: translateX(-500px) rotate(-180deg);
opacity: 0;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@keyframes righteasein {
0% {
transform: translateX(500px);
opacity: 0;
}
80% {
transform: translateX(0px);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes topeasein {
0% {
transform: translateY(-500px);
opacity: 0;
}
80% {
transform: translateY(0px);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes bottomeasein {
0% {
transform: translateY(1500px);
opacity: 0;
}
80% {
transform: translateX(0px);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes bigeasein {
0% {
transform: scale(0.2);
opacity: 0;
}
80% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes smalleasein {
0% {
transform: scale(2.2);
opacity: 0;
}
80% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
.gold-text {
font-size: 42px;
letter-spacing: 10px;
white-space: nowrap;
color: transparent;
display: inline-block;
position: absolute;
top: 60%;
left: 10%;
}
.gold-text:before {
content: "祝我新年快乐";
position: absolute;
top: 0;
left: 0;
color: #E8A95B;
z-index: -1;
text-shadow: 0 -1px 0 #f4cc9b, 0 1px 0 #a77334, 0 2px 0 #9b6b30, 0 3px 0 #90632d, 0 4px 0 #7a5426, 0 4px 2px #7a5426, 0 0.075em 0.1em rgba(26, 35, 39, 0.3), 0 0.15em 0.3em rgba(222, 153, 69, 0.2);
}
.gold-text__highlight {
display: inline-block;
position: relative;
z-index: 1;
}
.gold-text__highlight:after {
content: "祝我新年快乐";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
background-image: linear-gradient(100deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
background-clip: text;
background-size: 60rem 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
animation: shine 4s linear infinite;
}
@keyframes shine {
0% {
background-position: -50rem 0;
}
25% {
background-position: -50rem 0;
}
100% {
background-position: 30rem 0;
}
}
</style>
</head>
<body>
<div class="main">
<div id="bgm" class="bgm rotate" style="animation-play-state: paused;">
<audio loop="" id="music">
<source src="js/哦呼w、西风吹空%20-%20胡桃嗷2.0.mp3" type="audio/mpeg">
</audio>
</div>
<img src="./img/firework.gif" class="firework" />
<img src="./img/firework.gif" class="firework2" />
<div class="outer"></div>
<div class="box" id="box">
<div class="page current">
<img src="./img/img1.gif" class="img1" />
<img src="./img/img2.webp" class="img2" />
<h1 class="bottom-in gold-text">
<span class="gold-text__highlight">祝我新年快乐</span>
</h1>
</div>
<div class="page">
<h2 class="left-in word word1">祝我</h2>
<h2 class="right-in word word2">十<br>年<br>出<br>金</h2>
<h2 class="small-in word word3">财<br>源<br>滚<br>滚</h2>
<h2 class="bottom-in word word4">牛<br>逼<br>哄<br>哄</h2>
<h2 class="big-in word word5">前<br>程<br>似<br>锦</h2>
<h2 class="top-in word word6">心<br>想<br>事<br>成</h2>
<h2 class="left-turn-in word word7">万<br>事<br>如<br>意</h2>
</div>
</div>
</div>
<script>
let pageAll = document.getElementsByClassName("page");
var pageH = document.getElementById("box").offsetHeight;
let myMusic = document.getElementById("music");
let bgm = document.getElementById("bgm");
let startY, endY, val = 0;
let curPage = 0;
let nextPage = 1;
let ifDown = false;
let ifOK = true;
let playBgm = false;
bgm.addEventListener("click", function () {
if (myMusic.paused) {
myMusic.play();
bgm.style.animationPlayState = "running"
} else {
myMusic.pause();
bgm.style.animationPlayState = "paused"
}
})
document.addEventListener("click", function (e) {
if (!playBgm && myMusic.paused) {
myMusic.play();
bgm.style.animationPlayState = "running"
}
})
document.addEventListener("touchstart", function (e) {
if (ifOK) {
ifDown = true;
ifOK = false;
startY = e.touches[0].pageY;
}
})
document.addEventListener("touchmove", function (e) {
if (!ifDown) {
return;
}
endY = e.touches[0].pageY;
val = startY - endY;
moveF();
})
document.addEventListener("touchend", function (e) {
if (!ifDown) {
return;
}
console.log("mouseup", val)
ifDown = false;
})
document.addEventListener("mousedown", function (e) {
if (ifOK) {
ifDown = true;
ifOK = false;
console.log("mousedown", e.offsetY)
startY = e.offsetY;
}
})
document.addEventListener("mousemove", function (e) {
if (!ifDown) {
return;
}
endY = e.offsetY;
val = startY - endY;
moveF();
})
document.addEventListener("mouseup", function (e) {
if (!ifDown) {
return;
}
console.log("mouseup", val)
ifDown = false;//鼠标没点击
pageF();
})
//判断上翻还是下翻
function pageF() {
//可以翻了
if (Math.abs(val) > 60) {
startF();
} else {
pageAll[nextPage].classList.remove("active");
pageAll[nextPage].style.transform = "translateY(0px)";
clearF();
}
}
//还原
function clearF() {
val = 0;
startY = 0;
endY = 0;
ifOK = true;//翻页结束
console.log("结束", ifOK)
}
//开始翻页
function startF() {
if (val > 0) {//上翻
val += 15;
let a = pageH - val;
if (a <= 0) {
setCur();
} else {
pageAll[nextPage].style.transform = "translateY(" + a + "px)";
window.requestAnimationFrame(startF);
}
} else {
val -= 15;
let a = -(pageH + val);
if (a >= 0) {
setCur();
} else {
pageAll[nextPage].style.transform = "translateY(" + a + "px)";
window.requestAnimationFrame(startF);
}
}
}
//设置当前页面
function setCur() {
pageAll[nextPage].style.transform = "translateY(0px)";
pageAll[curPage].classList.remove("current");
curPage = nextPage;//当前页索引修改
pageAll[nextPage].classList.remove("active");
pageAll[curPage].classList.add("current");
clearF();
}
//移动
function moveF() {
nextPage = curPage;
let h;//移动
if (val > 0) {//最后一页 上翻 返回第一页
if (curPage < pageAll.length - 1) {
nextPage++;
} else {
nextPage = 0;
}
h = pageH - val;
} else {
//第一页 下翻 返回最后一页
if (curPage != 0) {
nextPage--;
} else {
nextPage = pageAll.length - 1;
}
h = - (pageH + val);
}
pageAll[nextPage].classList.add("active");
pageAll[nextPage].style.transform = "translateY(" + h + "px)";
}
//下雪
//随机数
function randNum(min, max) {
return min + Math.random() * (max - min);
}
//雪花
class Snowflake {
constructor() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.radius = 0;
this.alpha = 0;
this.reset();
}
//重置
reset() {
this.x = randNum(0, window.innerWidth);
this.y = randNum(0, -window.innerHeight);
this.vx = randNum(-3, 3);
this.vy = randNum(2, 5);
this.radius = randNum(2, 6);
this.alpha = randNum(0.4, 0.9);
}
//移动
update() {
this.x += this.vx;
this.y += this.vy;
if (this.y + this.radius > window.innerHeight) {
this.reset();
}
}
}
//雪
class Snow {
constructor() {
this.canvas = document.createElement("canvas");
this.ctx = this.canvas.getContext("2d");
document.body.appendChild(this.canvas);
window.addEventListener("resize", () => this.onResize());
this.onResize();
this.updateF = this.update.bind(this);
requestAnimationFrame(this.updateF);
this.createSnowflakes();
}
onResize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.width = this.width;
this.canvas.height = this.height;
}
createSnowflakes() {
const num = window.innerWidth / 3;
this.snowflakes = [];
for (let s = 0; s < num; s++) {
this.snowflakes.push(new Snowflake());
}
}
update() {
this.ctx.clearRect(0, 0, this.width, this.height);
for (let flake of this.snowflakes) {
flake.update();
this.ctx.save();
this.ctx.fillStyle = "#FFF";
this.ctx.beginPath();
this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
this.ctx.closePath();
this.ctx.globalAlpha = flake.alpha;
this.ctx.fill();
this.ctx.restore();
}
requestAnimationFrame(this.updateF);
}
}
new Snow();
</script>
</body>
</html>
图片的其他东西可以自己去找，想要的也可以私聊我，我发给你，最后点一下关注哦