diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/audio/happynewyear.mp3" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/audio/happynewyear.mp3" new file mode 100644 index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/audio/happynewyear.mp3" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/demo.html" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..8dba5250faefda05ac46ba9c15785724e790a606 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/demo.html" @@ -0,0 +1,40 @@ + + + + + + + Document + + + + +
+ + + +
+
+
+
点击屏幕
开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/demo1.html" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/demo1.html" new file mode 100644 index 0000000000000000000000000000000000000000..8dba5250faefda05ac46ba9c15785724e790a606 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/demo1.html" @@ -0,0 +1,40 @@ + + + + + + + Document + + + + +
+ + + +
+
+
+
点击屏幕
开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gift.html" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gift.html" new file mode 100644 index 0000000000000000000000000000000000000000..ed2cc68eb685f921be7ba64d8d70277832722588 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gift.html" @@ -0,0 +1,40 @@ + + + + + + Document + + + + +
+ + + +
+
+
+
点击屏幕
开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gifty.css" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gifty.css" new file mode 100644 index 0000000000000000000000000000000000000000..1896d94662f4971e56a74460e9414c6429054166 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gifty.css" @@ -0,0 +1,291 @@ +*{ + padding: 0; + margin: 0; +} +:root{ + font-size: 1.526vw; + font-family: 'Microsoft Yahei'; +} +html, +body{ + width: 100%; + height: 100%; +} +.music{ + position: fixed; + top: 3vh; + right: 4vw; + width: 15vw; + height: 15vw; + border-radius: 50%; + border: 4px solid red; + background-color: #fff; + z-index: 2; +} +.music >img:first-of-type{ + position: absolute; + top: 24%; + right: 2.5%; + width: 28.426%; + z-index: 2; +} +.music>img:last-of-type{ + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + margin: auto; + width: 79%; + z-index: 1; + +} +.music>img.play{ + animation: music_disc 4s linear infinite; +} +@keyframes music_disc{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(360deg); + } +} +.page{ + display: block; + position: relative; + width: 100vw; + height: 100%; + top: 0; + left: 0; +} +.bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: center center; + background-size: 100% 100%; + z-index: -1; +} +#page1>.bg{ + background-image: url(./images/p1_bg.jpg); +} +#page1>.p1-denglong{ + position: relative; + width: 45vw; + top: -1.5vh; + height: 71.2vh; + margin: 0 auto; + background: url(./images/p1_lantern.png) no-repeat center center; + background-size: 100%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + font-size: 3.506rem; + +} +#page1 > .p1-denglong::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 30vw; + height: 30vw; + background-color: #d60b3b; + opacity: 0.5; + box-shadow: 0 0 10vw 10vw #d60b3b; + border-radius: 50%; + z-index: -1; + animation: p1_toggle 1s linear infinite; +} +@keyframes p1_toggle{ + 0%{ + opacity: 0.5; + transform: scale(0.8,0.8); + } + 50%{ + opacity: 1; + transform: scale(1); + } + 100%{ + opacity: 0.5; + transform: scale(0.8,0.8); + } + +} +#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: 0 auto; + +} +#page1 > .p1-word{ + position: absolute; + left: 0; + right: 0; + bottom: 48px; + font-size: 2.134rem; + text-align: center; +} +#page2 >.bg{ + background-image: url(./images/p2_bg.jpg); +} +#page2 > .bg-p2-loading{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin:auto; + background: url(./images/p2_2022.png) no-repeat center center; + background-size: 100%; + width: 35vw; + height: 35vh; +} +#page2 > .p2-circle{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin:auto; + background: url(./images/p2_circle_outer.png) no-repeat center center; + background-size: 100%; + width: 60vw; + height: 60vh; + animation: circle-outer 1s 3s linear infinite; +} +@keyframes circle-outer{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(360deg); + } +} +#page2 > .p2-circle::before{ + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin:auto; + background: url(./images/p2_circle_middle.png) no-repeat center center; + background-size: 100%; + width: 46vw; + height: 46vh; + animation: circle-middle 1s 2s linear infinite; +} +@keyframes circle-middle{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(720deg); + } +} +#page2 > .p2-circle::after{ + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin:auto; + background: url(./images/p2_circle_inner.png) no-repeat center center; + background-size: 100%; + width: 40vw; + height: 40vh; + animation: circle-inner 1s 1s linear infinite; +} +@keyframes circle-inner{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(-1080deg); + } +} +#page3 >.bg{ + background-image: url(./images/p3_bg.jpg); +} +#page3 >.p3-log{ + position: absolute; + right: 0; + left: 0; + top: 8vh; + margin: auto; + background: url(./images/p1_minxi.png) no-repeat center center; + background-size: 100%; + width: 50vw; + height: 10vh; +} +#page3 >.p3-title{ + position: absolute; + top: 21vh; + right: 0; + left: 0; + + margin: auto; + background: url(./images/p3_title2.png) no-repeat center center; + background-size: 100%; + width: 48vw; + height: 50vh; +} +#page3 >.p3-first{ + position: absolute; + width: 23vw; + height: 42vh; + margin: auto; + top: 25.5vh; + left: 3.75vw; + background: url(./images/p3_couplet_second.png) no-repeat center center; + background-size: 100%; + +} +#page3 >.p3-second{ + position: absolute; + width: 23vw; + height: 42vh; + margin: auto; + top: 25.5vh; + right: 3.75vw; + background: url(./images/p3_couplet_first.png) no-repeat center center; + background-size: 100%; + +} +#page3 >.p3-fu{ + position: absolute; + left: 0; + right: 0; + bottom: 0vh; + margin:0 auto; + width: 35vw; + height: 35vh; + background: url(./images/p3_blessing.png) no-repeat center center; + background-size: 100%; + border-radius: 50%; + animation: fulu 1.5s linear infinite; +} +@keyframes fulu{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(360deg); + } +} \ No newline at end of file diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gifty.js" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gifty.js" new file mode 100644 index 0000000000000000000000000000000000000000..1e2eb693afd6bd2dd07c2b0685466d6c0ca79916 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/gifty.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/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/music_disc.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/music_disc.png" new file mode 100644 index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/music_disc.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/music_pointer.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/music_pointer.png" new file mode 100644 index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/music_pointer.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_bg.jpg" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_bg.jpg" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_lantern.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_lantern.png" new file mode 100644 index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_lantern.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_minxi.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_minxi.png" new file mode 100644 index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p1_minxi.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_2022.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_2022.png" new file mode 100644 index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_2022.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_bg.jpg" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1e7392b1712f0f92a43e0f951a5bd96f14303322 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_bg.jpg" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_inner.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_inner.png" new file mode 100644 index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_inner.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_middle.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_middle.png" new file mode 100644 index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_middle.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_outer.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_outer.png" new file mode 100644 index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p2_circle_outer.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_bg.jpg" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_bg.jpg" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_blessing.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_blessing.png" new file mode 100644 index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_blessing.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_couplet_first.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_couplet_first.png" new file mode 100644 index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745 Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_couplet_first.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_couplet_second.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_couplet_second.png" new file mode 100644 index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_couplet_second.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_title2.png" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_title2.png" new file mode 100644 index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd Binary files /dev/null and "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/images/p3_title2.png" differ diff --git "a/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/index.js" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..1e2eb693afd6bd2dd07c2b0685466d6c0ca79916 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/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/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/style.css" "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..e1ae2f9a62739bdb6e2e87300ce75879d2f47bb8 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211206-css3-\350\264\272\345\215\241/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/\351\231\210\345\273\272\350\215\243/211209-css3-CSS\346\225\210\346\236\234/demo1.html" "b/\351\231\210\345\273\272\350\215\243/211209-css3-CSS\346\225\210\346\236\234/demo1.html" new file mode 100644 index 0000000000000000000000000000000000000000..4d835651c4256f41f1655287f2375ec0d174ab8d --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211209-css3-CSS\346\225\210\346\236\234/demo1.html" @@ -0,0 +1,248 @@ + + + + + + + + + Document + + + + + +
+
+
+ 气泡提示 +
+
+
+ + + + \ No newline at end of file diff --git "a/\351\231\210\345\273\272\350\215\243/211210-css3-CSS\346\212\200\345\267\247/demo1.html" "b/\351\231\210\345\273\272\350\215\243/211210-css3-CSS\346\212\200\345\267\247/demo1.html" new file mode 100644 index 0000000000000000000000000000000000000000..31036d8f20bbfa44d8efe51c8b9082a300dd5d32 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211210-css3-CSS\346\212\200\345\267\247/demo1.html" @@ -0,0 +1,80 @@ + + + + + + Document + + + + + +
+ + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\351\231\210\345\273\272\350\215\243/211210-css3-CSS\346\212\200\345\267\247/demo2.html" "b/\351\231\210\345\273\272\350\215\243/211210-css3-CSS\346\212\200\345\267\247/demo2.html" new file mode 100644 index 0000000000000000000000000000000000000000..696627556f2e4d240b6670b20a7b313e1307ec93 --- /dev/null +++ "b/\351\231\210\345\273\272\350\215\243/211210-css3-CSS\346\212\200\345\267\247/demo2.html" @@ -0,0 +1,65 @@ + + + + + + Document + + + +
+ + +
+ + \ No newline at end of file