diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/audio/happynewyear.mp3" "b/\345\274\240\346\200\235\345\251\267/12-03/audio/happynewyear.mp3" new file mode 100644 index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/audio/happynewyear.mp3" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/demo.html" "b/\345\274\240\346\200\235\345\251\267/12-03/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..8dba5250faefda05ac46ba9c15785724e790a606 --- /dev/null +++ "b/\345\274\240\346\200\235\345\251\267/12-03/demo.html" @@ -0,0 +1,40 @@ + + + + + + + Document + + + + +
+ + + +
+
+
+
点击屏幕
开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/music_disc.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/music_disc.png" new file mode 100644 index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/music_disc.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/music_pointer.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/music_pointer.png" new file mode 100644 index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/music_pointer.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p1_bg.jpg" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p1_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p1_bg.jpg" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p1_lantern.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p1_lantern.png" new file mode 100644 index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p1_lantern.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p1_minxi.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p1_minxi.png" new file mode 100644 index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p1_minxi.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p2_2022.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_2022.png" new file mode 100644 index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_2022.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p2_bg.jpg" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1b7ca22f063e338f960282774788e82127cff0fb Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_bg.jpg" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_inner.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_inner.png" new file mode 100644 index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_inner.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_middle.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_middle.png" new file mode 100644 index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_middle.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_outer.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_outer.png" new file mode 100644 index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p2_circle_outer.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p3_bg.jpg" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_bg.jpg" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p3_blessing.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_blessing.png" new file mode 100644 index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_blessing.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p3_couplet_first.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_couplet_first.png" new file mode 100644 index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745 Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_couplet_first.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p3_couplet_second.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_couplet_second.png" new file mode 100644 index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_couplet_second.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/images/p3_title2.png" "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_title2.png" new file mode 100644 index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/12-03/images/p3_title2.png" differ diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/index.js" "b/\345\274\240\346\200\235\345\251\267/12-03/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..1e2eb693afd6bd2dd07c2b0685466d6c0ca79916 --- /dev/null +++ "b/\345\274\240\346\200\235\345\251\267/12-03/index.js" @@ -0,0 +1,44 @@ +window.addEventListener('DOMContentLoaded', function() { + let music = document.getElementById('music'); + let audio = document.querySelector('audio'); + + let page1 = document.getElementById('page1'); + let page2 = document.getElementById('page2'); + let page3 = document.getElementById('page3'); + // 兼容谷歌浏览器不能自动播放的问题 + if (audio.paused) { + music.style.animationPlayState = 'paused'; + } else { + music.style.animationPlayState = 'running'; + } + // 点击音乐图标，控制音乐播放器效果 + music.ontouchstart = function() { + if (audio.paused) { + audio.play() + // 当音乐停止后，会将play这个类移除掉，所以当音乐再次点击播放时，需要将这个类加上。 + music.classList.add('play'); + music.style.animationPlayState = 'running'; + } else { + audio.pause() + music.style.animationPlayState = 'paused'; + } + } + // 当音乐播放结束后，自动停止光盘旋转效果 + audio.addEventListener('ended', function() { + music.classList.remove('play'); + }); + + // 显示翻页效果 + page1.addEventListener('touchstart', function() { + page1.style.display = 'none'; + page2.style.display = 'block'; + page3.style.display = 'block'; + page3.style.top = '100%'; + + // 设置计时器，当第二个页面动画运行结束后，直接跳转到第三个页面 + setTimeout(() => { + page2.classList.add('fade-out'); + page3.classList.add('fade-in') + }, 5500); + }) +}) \ No newline at end of file diff --git "a/\345\274\240\346\200\235\345\251\267/12-03/style.css" "b/\345\274\240\346\200\235\345\251\267/12-03/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..e1ae2f9a62739bdb6e2e87300ce75879d2f47bb8 --- /dev/null +++ "b/\345\274\240\346\200\235\345\251\267/12-03/style.css" @@ -0,0 +1,321 @@ +/* 通用设置 */ +* { + margin: 0; + padding: 0; +} +:root { + font-size: 1.526vw; + font-family: 'Microsoft Yahei'; +} +html,body { + height: 100%; +} +/* 音乐盒子 */ +.music { + position: fixed; + top: 3vh; + right: 4vw; + width: 15vw; + height: 15vw; + border: 4px solid #ef1635; + border-radius: 50%; + background-color: #fff; + z-index: 2; +} +.music > img:first-of-type { + position: absolute; + top: 24%; + right: 2.5%; + width: 28.426%; + z-index: 1; +} +.music > img:last-of-type { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + width: 79%; +} +.music > img.play { + animation: music_disc 4s linear infinite; +} +@keyframes music_disc { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +/* 背景设置 */ +.page { + position: absolute; + width: 100vw; + height: 100%; + top: 0; + left: 0; +} +.page > .bg { + position: absolute; + width: 100%; + height: 100%; + z-index: -1; +} +/* 第一个页面 */ +#page1 { + display: block; +} +#page1 .bg { + background-image: url(./images/p1_bg.jpg); + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; +} +#page1 > .p1-denglong { + position: absolute; + top: -3.1%; + left: 0; + right: 0; + margin: 0 auto; + width: 45vw; + height: 71.2vh; + font-size: 3.506rem; + background: url(./images/p1_lantern.png) no-repeat center bottom; + background-size: 100%; + padding-top: 31vh; + box-sizing: border-box; + text-align: center; +} +#page1 > .p1-denglong::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + z-index: -1; + width: 30vw; + height: 30vw; + background-color: #d60b3b; + opacity: 0.5; + box-shadow: 0 0 10vw 10vw #d60b3b; + border-radius: 50%; + /* 添加动画效果 */ + animation: p1_lantern .5s infinite alternate; +} +@keyframes p1_lantern { + 0% { + opacity: 0.5; + transform: scale(0.8, 0.8); + } + 100% { + opacity: 1; + } +} +#page1 > .p1-icon { + position: absolute; + left: 0; + right: 0; + bottom: 9vh; + background: url(./images/p1_minxi.png) no-repeat center center; + background-size: 100%; + width: 50vw; + height: 10vh; + margin: auto; +} +#page1 > .p1-words { + font-size: 2.134rem; + position: absolute; + left: 0; + right: 0; + bottom: 48px; + text-align: center; +} + +/* 第二个页面 */ +#page2 { + display: none; + transition: all 0.5s; +} +#page2.fade-out { + opacity: .3; + transform: translate(0, -100%); +} +#page2 > .bg { + background-image: url(./images/p2_bg.jpg); + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; +} +#page2 > .p2-bg-loading { + z-index: 4; + background-color: #ef1639; + animation: p2_bg_loading 1s linear forwards; +} +@keyframes p2_bg_loading { + 0% {opacity: 1;} + 100% {opacity: 0;} +} +#page2 > .p2-circle { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + border-radius: 50%; + background: url(./images/p2_circle_outer.png) no-repeat center center; + background-size: 100%; + width: 60vw; + height: 60vw; + /* 添加动画 */ + animation: p2_circle_outer 1s linear 3s infinite; +} +@keyframes p2_circle_outer { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +#page2 > .p2-circle::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + border-radius: 50%; + background: url(./images/p2_circle_middle.png) no-repeat center center; + background-size: 100%; + width: 46vw; + height: 46vw; + /* 添加动画 */ + animation: p2_circle_middle 1s linear 2s infinite; +} +@keyframes p2_circle_middle { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(720deg); + } +} +#page2 > .p2-circle::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + border-radius: 50%; + background: url(./images/p2_circle_inner.png) no-repeat center center; + background-size: 100%; + width: 40vw; + height: 40vw; + /* 添加动画 */ + animation: p2_circle_inner 1s linear 1s infinite; +} + +@keyframes p2_circle_inner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-1080deg); + } +} +#page2 > .p2-year { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + background: url(./images/p2_2022.png) no-repeat center center; + background-size: 100%; + width: 35vw; + height: 35vw; +} + +/* 第三个页面 */ +#page3 { + display: none; + transition: all 0.5s; +} +#page3.fade-in { + transform: translate(0, -100%); +} +#page3 > .bg { + background-image: url(./images/p3_bg.jpg); + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; +} +#page3 > .p3-logo { + width: 50vw; + height: 6vh; + position: absolute; + top: 8vh; + left: 0; + right: 0; + margin: auto; + background: url(./images/p1_minxi.png) no-repeat center center; + background-size: 100%; +} +#page3 > .p3-title { + width: 48vw; + height: 50vh; + position: absolute; + top: 21vh; + left: 0; + right: 0; + margin: auto; + background: url(./images/p3_title2.png) no-repeat center center; + background-size: 100%; +} +#page3 > .p3-second { + width: 23vw; + height: 42vh; + position: absolute; + top: 25.5vh; + left: 3.75vw; + background: url(./images/p3_couplet_second.png) no-repeat center center; + background-size: 100%; +} +#page3 .p3-first { + width: 23vw; + height: 42vh; + position: absolute; + top: 25.5vh; + right: 3.75vw; + background: url(./images/p3_couplet_first.png) no-repeat center center; + background-size: 100%; +} +#page3 > .p3-fu { + width: 35vw; + height: 35vw; + position: absolute; + bottom: 5vh; + right: 0; + left: 0; + margin: 0 auto; + background: url(./images/p3_blessing.png) no-repeat center center; + background-size: 100%; + border-radius: 50%; + animation: p3_blessing 2s linear infinite; +} +@keyframes p3_blessing { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git "a/\345\274\240\346\200\235\345\251\267/12-10/onoff.html" "b/\345\274\240\346\200\235\345\251\267/12-10/onoff.html" new file mode 100644 index 0000000000000000000000000000000000000000..d6596ef69a204087da55bc32882e9ee2fc6d8d76 --- /dev/null +++ "b/\345\274\240\346\200\235\345\251\267/12-10/onoff.html" @@ -0,0 +1,90 @@ + + + + + + + + Document + + + + +
+ + + + + + +
+ + + \ No newline at end of file