diff --git a/2/index.css b/2/index.css new file mode 100644 index 0000000..796211f --- /dev/null +++ b/2/index.css @@ -0,0 +1,145 @@ +body { + margin: 0; +} + +.title { + font-family: 'Times New Roman', Times, serif; +} + +.url { + text-decoration: none; + margin: 200px auto; + color: #c617c3 +} + +.header { + width: 100vw; + height: 5vh; + margin-bottom: auto; + z-index: 1; + background-color: #409EFF; +} + +#tz { + display: flex; + width: 3vh; + margin-left: auto; + margin-right: 1vw; + justify-content: flex-start; + align-items: center; +} + +#tz:hover { + transition: all 0.5s; + transform: scale(1.4, 1.4); +} + +.aside { + margin-right: auto; + justify-content: center; + align-items: center; + height: 95vh; + width: 15vw; + background-color: #ecf5ff; +} + +.content { + width: 85vw; + height: 95vh; + flex: auto; + justify-content: center; + align-items: center; +} + +.aside_con { + display: flex; + justify-content: center; +} + +div { + display: flex; +} + +.pole { + align-items: center; + width: 25vw; + height: 2vh; + border-radius: 7px; + background-color: #ecf5ff; +} + +.ball { + animation: myball 2s; + animation-direction: alternate; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + width: 1.5vh; + height: 1.5vh; + margin: auto 0.3vh; + border-radius: 100%; + background-color: #F56C6C; +} + +.circles { + flex: 100%; + flex-wrap: wrap; +} + +.circle { + width: 10vh; + height: 10vh; + margin: 30px; + border-radius: 50%; + background-color: #67C23A; +} + +.buttons { + margin-left: 2vw; + flex-direction: column; +} + +.but { + width: 5vw; + height: 4vh; + margin: 10px; + border-radius: 5px; + border-width: 0px; + background-color: #ecf5ff; + color: #409EFF; +} + +.but:hover { + animation: buttons 0.6s; +} + +.dis { + flex-direction: column; +} + +@keyframes myball { + 0% { + background-color: #F56C6C; + margin-left: 0.3vh; + } + + 50% { + background-color: #E6A23C; + } + + 100% { + background-color: #67C23A; + margin-left: 24vw; + } +} + +@keyframes buttons { + 0% { + background-color: #ecf5ff; + color: #409EFF; + } + + 100% { + background-color: #409EFF; + color: #ecf5ff; + } +} \ No newline at end of file diff --git a/2/index.html b/2/index.html new file mode 100644 index 0000000..290dd30 --- /dev/null +++ b/2/index.html @@ -0,0 +1,49 @@ + + + + + + Hello 挑战网 + + + + + +
+ Tenzer +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/2/main.js b/2/main.js new file mode 100644 index 0000000..584b866 --- /dev/null +++ b/2/main.js @@ -0,0 +1,132 @@ +function getRandomColor() { + var letters = '0123456789ABCDEF'.split(''); + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} + +function sleep(sleepTime) { + var startTime = new Date().getTime(); + while (true) if (new Date().getTime() - startTime > sleepTime) break; +} + +var mouse_on = false, text_html; +var change_time = 0; + +function reset_color() { + set_color(1, "#F56C6C"); + set_color(2, "#E6A23C"); + set_color(3, "#67C23A"); + change_time = 0; +} + +function change_color() { + change_time += 1; + if (change_time > 6) { + set_color(1, "random"); + set_color(2, "random"); + set_color(3, "random"); + } + else if (change_time % 3 == 0) { + set_color(1, "#F56C6C"); + set_color(2, "#E6A23C"); + set_color(3, "#67C23A"); + } + else if (change_time % 3 == 1) { + set_color(2, "#F56C6C"); + set_color(3, "#E6A23C"); + set_color(1, "#67C23A"); + } + else if (change_time % 3 == 2) { + set_color(3, "#F56C6C"); + set_color(1, "#E6A23C"); + set_color(2, "#67C23A"); + } +} + +function animation_play() { + state = $(".ball").css("animation-play-state"); + if (state == "paused") $(".ball").css("animation-play-state", "running"); + else $(".ball").css("animation-play-state", "paused"); +} + +$(".aside_con").hover(function () { + mouse_on = true; + text_html = $(this); +}); + +function reset_size() { + mouse_on = false; + $(this).css("font-size", "16px"); + text_html.css("color", "black"); +} + +function text_bigger() { + if (mouse_on === true) { + var text_size = parseFloat(text_html.css("font-size")); + if (text_size < 30) { + text_size += 0.1; + text_html.css("font-size", String(text_size) + "px"); + } + } +} + +function text_colorful() { + if (mouse_on === true) { + var text_size = parseFloat(text_html.css("font-size")); + if (text_size < 30) { + text_html.css("color", getRandomColor()); + } + } +} + +function set_color(id, color) { + if (color == "random") $(".c" + String(id)).css("background-color", getRandomColor()); + else $(".c" + String(id)).css("background-color", color); +} + +setInterval(text_bigger, 10); +setInterval(text_colorful, 100); + +$(window).resize(function () { + text_html = $(this); +}); + +function init() { + set_color(1, "#F56C6C"); + set_color(2, "#E6A23C"); + set_color(3, "#67C23A"); + $(".aside_con").mouseleave(reset_size); +} + +init(); + +// tippy('.aside_con', { +// content: '点我点我', +// placement: 'right', +// distance: +30 +// }); + +function debug_f(){ + console.log($(".ball").offset().left>$(".c1").offset().left); +} + +function getItemColors (colorLevel) { + var colors= []; + //默认的最深颜色 + var red = 134,green = 108, blue = 184; + //最浅颜色是239,239,239 比如：最浅颜色的red是 239 则差值为239-134=105 + var maxRed = 105,maxGreen = 131,maxBlue = 55; + var level = colorLevel; + while(level--) { + colors.push( 'rgb('+red +','+green+','+blue+')'); + red += parseInt(maxRed/colorLevel); + green += parseInt(maxGreen/colorLevel); + blue += parseInt(maxBlue/colorLevel); + } + return colors; +} + +setInterval(debug_f, 100); \ No newline at end of file