<!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>
图片的其他东西可以自己去找，想要的也可以私聊我，我发给你，最后点一下关注哦
标签：opacity,100%,transform,JAVAScrpit,animation,一年,position,新年礼物,nextPage From： https://blog.51cto.com/u_15879139/6007226