diff --git "a/\345\274\240\347\247\200\350\212\263/211209-CSS\344\275\234\344\270\232-CSS\346\225\210\346\236\234/demo.html" "b/\345\274\240\347\247\200\350\212\263/211209-CSS\344\275\234\344\270\232-CSS\346\225\210\346\236\234/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..b246bc9564f9800e65ccf5be9125f504b2faa6e1 --- /dev/null +++ "b/\345\274\240\347\247\200\350\212\263/211209-CSS\344\275\234\344\270\232-CSS\346\225\210\346\236\234/demo.html" @@ -0,0 +1,163 @@ + + + + + + + + Document + + + + +
左边气泡提示
+
右边气泡提示
+
下边气泡提示
+ + + \ No newline at end of file diff --git "a/\345\274\240\347\247\200\350\212\263/211210-CSS\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo.html" "b/\345\274\240\347\247\200\350\212\263/211210-CSS\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..0dce0a84b0b61fe653adf73e5e54ea1dc7a6fa50 --- /dev/null +++ "b/\345\274\240\347\247\200\350\212\263/211210-CSS\344\275\234\344\270\232-CSS\346\212\200\345\267\247/demo.html" @@ -0,0 +1,79 @@ + + + + + + Document + + + +
+ + + + + + +
+ + + \ No newline at end of file diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/demo.html" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..a1e5bdba75ccb7ec891ed63b7ed44eed6d8cfe45 --- /dev/null +++ "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/demo.html" @@ -0,0 +1,42 @@ + + + + + + + + 春节贺卡 + + + +
+ + +
+
+
+
点击屏幕 +
开启好运2022
+
+
2022年新年特献
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_disc.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_disc.png" new file mode 100644 index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_disc.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_pointer.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_pointer.png" new file mode 100644 index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_pointer.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_bg.jpg" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_bg.jpg" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_lantern.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_lantern.png" new file mode 100644 index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_lantern.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_minxi.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_minxi.png" new file mode 100644 index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_minxi.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2022.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2022.png" new file mode 100644 index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2022.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_bg.jpg" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1e7392b1712f0f92a43e0f951a5bd96f14303322 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_bg.jpg" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_inner.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_inner.png" new file mode 100644 index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_inner.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_middle.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_middle.png" new file mode 100644 index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_middle.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_outer.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_outer.png" new file mode 100644 index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_outer.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_bg.jpg" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_bg.jpg" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_blessing.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_blessing.png" new file mode 100644 index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_blessing.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_first.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_first.png" new file mode 100644 index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745 Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_first.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_second.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_second.png" new file mode 100644 index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_second.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title2.png" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title2.png" new file mode 100644 index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd Binary files /dev/null and "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title2.png" differ diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/script.js" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/script.js" new file mode 100644 index 0000000000000000000000000000000000000000..f96f21074b751f2c29aca9926d887654b779ead0 --- /dev/null +++ "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/script.js" @@ -0,0 +1,36 @@ +//加载完页面才执行 +window.onload = () => { + const page1 = document.getElementById('page1'); + const page2 = document.getElementById('page2'); + const page3 = document.getElementById('page3'); + const music = document.getElementById('music'); + const audio = document.getElementsByTagName('audio')[0]; + + audio.addEventListener('ended', () => { + music.style.animationPlayState="paused"; + music.style.webkitAnimationPlayState="paused"; + }); + music.addEventListener('touchstart', () => { + if(audio.paused){ + audio.play(); + music.style.animationPlayState="running"; + music.style.webkitAnimationPlayState="running"; + }else{ + audio.pause(); + music.style.animationPlayState="paused"; + music.style.webkitAnimationPlayState="paused"; + } + },false); + + page1.addEventListener('touchstart', () => { + page1.style.display = 'none'; + page2.style.display = 'block'; + page3.style.display = 'block'; + page3.style.top = '100%'; + + setTimeout(() => { + page2.setAttribute('class','page fadeOut'); + page3.setAttribute('class','page fadeIn'); + },5500) + },false); +} \ No newline at end of file diff --git "a/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/style.css" "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..e817bda31081e56312db2884cca61e5f85595afa --- /dev/null +++ "b/\345\274\240\347\247\200\350\212\263/\346\226\260\346\230\245\350\264\272\345\215\241/style.css" @@ -0,0 +1,428 @@ +* { + margin:0; + padding: 0; + border: none; + font-size: 1.5625vw; + font-family: "Microsoft Yahei"; +} +html, +body{ + height: 100%; + overflow: hidden; +} +.music{ + position: fixed; + top: 3vh; + right: 4vw; + z-index: 5; + width: 15vw; + height: 15vw; + border: 4px solid #ef1639; + border-radius: 50%; + background: #fff; +} +.music > img:first-of-type{ + position: absolute; + top: 24%; + right: 2.5%; + width: 28.421%; + z-index: 6; +} +.music > img:last-of-type{ + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + margin:auto; + width: 79%; +} +.music > img.play{ + -webkit-animation:music_disc 4s linear infinite; + animation:music_disc 4s linear infinite; +} +@-webkit-keyframes music_disc{ + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes music_disc{ + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.page{ + position: absolute; + width: 100%; + height: 100%; +} +.page > .bg{ + position: absolute; + width: 100%; + height: 100%; + z-index: -1; +} +#page1{ + display: block; +} +#page1 > .bg{ + background: url('./images/p1_bg.jpg') no-repeat center center; + background-size: 100%; +} +#page1 > .p1_lantern{ + position: absolute; + + right: 0; + left: 0; + margin:auto; + background: url('./images/p1_lantern.png') no-repeat center bottom; + background-size: 100%; + width: 45vw; + height: 71.2vh; + font-size: 3rem; + padding-top: 31vh; + color:#fff; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + text-align: center; +} +#page1 > .p1_lantern:before{ + position: absolute; + top:0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + content: ""; + margin:auto; + width: 30vw; + height: 30vw; + background: #d60b3b; + opacity: .5; + border-radius: 50%; + -webkit-box-shadow: 0 0 10vw 10vw #d60b3b; + -ms-box-shadow: 0 0 10vw 10vw #d60b3b; + -o-box-shadow: 0 0 10vw 10vw #d60b3b; + box-shadow: 0 0 10vw 10vw #d60b3b; + -webkit-animation: p1_lantern .5s infinite alternate; + animation: p1_lantern .5s infinite alternate; +} +@-webkit-keyframes p1_lantern { + 0% { + opacity: .5; + -webkit-transform: scale(.8,.8); + transform: scale(.8,.8); + } + 100%{ + opacity: 1; + } +} +@keyframes p1_lantern { + 0% { + opacity: .5; + -webkit-transform: scale(.8,.8); + transform: scale(.8,.8); + } + 100%{ + opacity: 1; + } +} +#page1 > .p1_minxi{ + position: absolute; + right: 0; + left: 0; + bottom: 9vh; + background: url('./images/p1_minxi.png') no-repeat center center; + background-size: 100%; + width: 55.656vw; + height: 18.63vh; + margin: auto; +} +#page1 > .p1_words{ + font-size: 4.134rem; + position: absolute; + right: 0; + left: 0; + bottom: 48px; + text-align: center; + color: #231815; +} +#page2{ + display: none; + -webkit-transition: .5s; + -o-transition: .5s; + transition: .5s; +} +#page2.fadeOut{ + opacity: .3; + -webkit-transform: translate(0,-100%); + -ms-transform: translate(0,-100%); + transform: translate(0,-100%); +} +#page2 > .p2_bg_loading { + z-index: 4; + background: #ef1639; + -webkit-animation: loading 1s linear forwards; + animation: loading 1s linear forwards; +} +@-webkit-keyframes loading{ + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes loading{ + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +#page2 > .bg{ + background: url('./images/p2_bg.jpg') no-repeat center center; + background-size: 100%; +} +#page2 > .p2_circle{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin:auto; + background: url('./images/p2_circle_outer.png') no-repeat center center; + background-size: 100%; + width: 59.375vw; + height: 59.375vh; + -webkit-animation: outer 1s linear 3s infinite; + animation: outer 1s linear 3s infinite; +} +@-webkit-keyframes outer { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@keyframes outer { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +#page2 > .p2_circle:before{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin:auto; + content: ""; + background: url('./images/p2_circle_middle.png') no-repeat center center; + background-size: 100%; + width: 45.625vw; + height: 45.625vh; + -webkit-animation: mid 1s linear 2s infinite; + animation: mid 1s linear 2s infinite; +} +@-webkit-keyframes mid { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(720deg); + transform: rotate(720deg); + } +} +@keyframes mid { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(720deg); + transform: rotate(720deg); + } +} +#page2 > .p2_circle:after{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin:auto; + content: ""; + background: url('./images/p2_circle_inner.png') no-repeat center center; + background-size: 100%; + width: 39.9375vw; + height: 39.9375vh; + -webkit-animation: inner 1s linear 1s infinite; + animation: inner 1s linear 1s infinite; +} +@-webkit-keyframes inner { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(-1080deg); + transform: rotate(-1080deg); + } +} +@keyframes inner { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(-1080deg); + transform: rotate(-1080deg); + } +} +#page2 > .p2_2022{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin:auto; + background: url('./images/p2_2022.png') no-repeat center center; + background-size: 100%; + width: 27.59vw; + height: 6.24vh; +} +#page3{ + display: none; + -webkit-transition: .5s; + -o-transition: .5s; + transition: .5s; +} +#page3.fadeIn{ + opacity: 1; + -webkit-transform: translate(0,-100%); + -ms-transform: translate(0,-100%); + transform: translate(0,-100%); +} +#page3 > .bg{ + background: url('./images/p3_bg.jpg') no-repeat center center; + background-size: 100%; +} +#page3 > .p3_logo { + width: 34.6875vw; + height: 6.327vh; + position: absolute; + top: 7.82vh; + right: 0; + left: 0; + margin:auto; + background: url('./images/p1_minxi.png') no-repeat center center; + background-size: 100%; +} +#page3 > .p3_title { + width: 48.125vw; + height: 50vh; + position: absolute; + top:21vh; + right: 0; + left: 0; + margin:auto; + background: url('./images/p3_title2.png') no-repeat center center; + background-size: 100%; +} +#page3 > .p3_second { + width: 22.8125vw; + height: 41.652vh; + position: absolute; + top:25.48vh; + left: 3.75vw; + background: url('./images/p3_couplet_second.png') no-repeat center center; + background-size: 100%; + -webkit-animation: first 1s linear infinite alternate; + animation: first 1s linear infinite alternate; +} +#page3 > .p3_first { + width: 22.8125vw; + height: 41.652vh; + position: absolute; + top:25.48vh; + right: 3.75vw; + background: url('./images/p3_couplet_first.png') no-repeat center center; + background-size: 100%; + -webkit-animation: first 1s linear infinite alternate; + animation: first 1s linear infinite alternate; +} +@-webkit-keyframes first { + 0% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 100%{ + + } +} +@keyframes first { + 0% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 100%{ + + } +} +#page3 > .p3_blessing { + width: 32vw; + height: 18vh; + position: absolute; + right: 0; + left: 0; + bottom: 10vh; + margin:auto; + background: url('./images/p3_blessing.png') no-repeat center center; + background-size: 100%; + border-radius: 50%; + -webkit-animation: blessing 2s linear infinite; + animation: blessing 2s linear infinite; +} +@-webkit-keyframes blessing { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes blessing { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} \ No newline at end of file