Home Explore Help
Register Sign In
schtonn
/
public
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add funny stuff

root 2 years ago
parent
98ef3e0f87
commit
16b0968730
6 changed files with 855 additions and 2 deletions
Split View Show Diff Stats
  1. 13 0
      fun/button/TweenMax.min.js
  2. 145 0
      fun/button/index.html
  3. 139 0
      fun/button/script.js
  4. 72 0
      fun/button/style.css
  5. 377 0
      fun/button/three.min.js
  6. 109 2
      fun/index.html

File diff suppressed because it is too large
+ 13 - 0
fun/button/TweenMax.min.js


+ 145 - 0
fun/button/index.html
View File 

@@ -0,0 +1,145 @@
 
+<!DOCTYPE html>
 
+
 
+<head>
 
+    <script type="text/javascript" src="/js/jquery.min.js" crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="/css/bootstrap.min.css" crossorigin="anonymous">
 
+    <script type="text/javascript" src="/js/bootstrap.min.js" crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="/css/style.css">
 
+    <link rel="preconnect" href="https://fonts.gstatic.com">
 
+    <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
 
+&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
+    <title>where's the button</title>
 
+    <meta charset="UTF-8">
 
+    <link rel="stylesheet" href="./style.css">
 
+    <script src='three.min.js'></script>
 
+    <script src='TweenMax.min.js'></script>
 
+    <script src="./script.js"></script>
 
+    <style>
 
+        body {
 
+            overflow-x: hidden;
 
+        }
 
+
 
+        .toggle {
 
+            display: inline-block;
 
+        }
 
+
 
+        .toggle {
 
+            box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
 
+            border-radius: 8px;
 
+            background: #ccd0d4;
 
+            position: relative;
 
+            height: 140px;
 
+            width: 140px;
 
+            scale: 0.5;
 
+            margin: -30px;
 
+        }
 
+
 
+        .toggle:before {
 
+            box-shadow: 0 0 17.5px 8.75px #fff;
 
+            border-radius: 118.3px;
 
+            background: #fff;
 
+            position: absolute;
 
+            margin-left: -50.4px;
 
+            margin-top: -50.4px;
 
+            opacity: 0.2;
 
+            content: "";
 
+            height: 100.8px;
 
+            width: 100.8px;
 
+            left: 50%;
 
+            top: 50%;
 
+        }
 
+
 
+        .toggle .button {
 
+            -webkit-filter: blur(1px);
 
+            -moz-filter: blur(1px);
 
+            filter: blur(1px);
 
+            transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
 
+            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
 
+            border-radius: 96.32px;
 
+            position: absolute;
 
+            background: #ccd0d4;
 
+            margin-left: -48.16px;
 
+            margin-top: -48.16px;
 
+            display: block;
 
+            height: 96.32px;
 
+            width: 96.32px;
 
+            left: 50%;
 
+            top: 50%;
 
+        }
 
+
 
+        .toggle .label {
 
+            transition: 100ms cubic-bezier(0.23, 1, 0.32, 1);
 
+            text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px #fff;
 
+            line-height: 129px;
 
+            text-align: center;
 
+            position: absolute;
 
+            font-family: "Lato", sans-serif;
 
+            font-weight: 700;
 
+            font-size: 42px;
 
+            display: block;
 
+            opacity: 0.9;
 
+            height: 100%;
 
+            width: 100%;
 
+            color: rgba(0, 0, 0, 0.4);
 
+        }
 
+
 
+        .toggle input {
 
+            opacity: 0;
 
+            position: absolute;
 
+            cursor: pointer;
 
+            z-index: 1;
 
+            height: 100%;
 
+            width: 100%;
 
+            left: 0;
 
+            top: 0;
 
+        }
 
+
 
+        .toggle input:active~.button {
 
+            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
 
+        }
 
+
 
+        .toggle input:active~.label {
 
+            font-size: 40px;
 
+            color: rgba(0, 0, 0, 0.45);
 
+        }
 
+
 
+        .toggle input:checked~.button {
 
+            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
 
+        }
 
+
 
+        .toggle input:checked~.label {
 
+            font-size: 40px;
 
+            color: rgba(0, 0, 0, 0.4);
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <button>I'm a Button</button>
 
+    </div>
 
+    <div class="container">
 
+        <div class="toggle">
 
+            <input type="checkbox">
 
+            <span class="button"></span>
 
+            <span class="label">1</span>
 
+        </div>
 
+        <div class="toggle">
 
+            <input type="checkbox" checked>
 
+            <span class="button"></span>
 
+            <span class="label">2</span>
 
+        </div>
 
+        <div class="toggle">
 
+            <input type="checkbox">
 
+            <span class="button"></span>
 
+            <span class="label">yes</span>
 
+        </div>
 
+        <div class="toggle">
 
+            <input type="checkbox" checked>
 
+            <span class="button"></span>
 
+            <span class="label">no</span>
 
+        </div>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 139 - 0
fun/button/script.js
View File 

@@ -0,0 +1,139 @@
 
+Button = (function () {
 
+
 
+  var scene,
 
+    camera,
 
+    renderer,
 
+    button,
 
+    theButtonThe;
 
+
 
+  function makeAScene() {
 
+
 
+    scene = new THREE.Scene();
 
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 
+    renderer = new THREE.WebGLRenderer({
 
+      antialias: true,
 
+      transparent: true,
 
+      alpha: true
 
+    });
 
+
 
+    renderer.setSize(window.innerWidth - 15, window.innerHeight - 15);
 
+
 
+    var container = document.querySelector('.container');
 
+
 
+    container.appendChild(renderer.domElement);
 
+
 
+    var buttonOuterGeometry = new THREE.TorusGeometry(5, .5, 25, 50),
 
+      buttonMaterial = new THREE.MeshPhongMaterial({
 
+        color: 0xec6115,
 
+        emissive: 0xbd411e,
 
+        shininess: 60
 
+      }),
 
+      extrudeSettings = {
 
+        amount: 0.485,
 
+        bevelEnabled: false
 
+      };
 
+
 
+    button = new THREE.Mesh(buttonOuterGeometry, buttonMaterial);
 
+
 
+    var buttonInnerShape = new THREE.Shape();
 
+    buttonInnerShape.moveTo(5, 0);
 
+    buttonInnerShape.absarc(0, 0, 5, 0, Math.PI * 2, false),
 
+      holePath1 = new THREE.Path(),
 
+      holePath2 = new THREE.Path(),
 
+      holePath3 = new THREE.Path(),
 
+      holePath4 = new THREE.Path();
 
+
 
+    holePath1.moveTo(-1, 1.5);
 
+    holePath1.absarc(-1.53, 1.5, .5, 0, Math.PI * 2, true);
 
+    buttonInnerShape.holes.push(holePath1);
 
+
 
+    holePath2.moveTo(-2, 1.5);
 
+    holePath2.absarc(-1.5, -1.5, .5, 0, Math.PI * 2, true);
 
+    buttonInnerShape.holes.push(holePath2);
 
+
 
+    holePath3.moveTo(2, -1.5);
 
+    holePath3.absarc(1.5, -1.5, .5, 0, Math.PI * 2, true);
 
+    buttonInnerShape.holes.push(holePath3);
 
+
 
+    holePath4.moveTo(2, 1.5);
 
+    holePath4.absarc(1.5, 1.5, .5, 0, Math.PI * 2, true);
 
+    buttonInnerShape.holes.push(holePath4);
 
+
 
+    var buttonInnerGeometry = new THREE.ExtrudeGeometry(buttonInnerShape, extrudeSettings),
 
+      buttonInner = new THREE.Mesh(buttonInnerGeometry, buttonMaterial);
 
+
 
+    button.add(buttonInner);
 
+
 
+    button.rotation.set(Math.PI / 2, 0, 0);
 
+
 
+    scene.add(button);
 
+
 
+    var light = new THREE.DirectionalLight(0xffffff, 1);
 
+
 
+    light.position.set(0, 1, 0);
 
+    scene.add(light);
 
+
 
+    var cameraZPosition = window.innerHeight < 500 ? 10 : 17;
 
+
 
+    camera.position.set(0, 0, cameraZPosition);
 
+
 
+    render();
 
+  }
 
+
 
+  function update() {
 
+    renderer.setSize(window.innerWidth - 15, window.innerHeight - 15);
 
+    camera.aspect = window.innerWidth / window.innerHeight;
 
+    camera.updateProjectionMatrix();
 
+
 
+    var cameraZPosition = window.innerHeight < 500 ? 10 : 17;
 
+
 
+    camera.position.set(0, 0, cameraZPosition);
 
+  }
 
+
 
+  function render() {
 
+    requestAnimationFrame(render);
 
+    renderer.render(scene, camera);
 
+  };
 
+
 
+  function itsAButton() {
 
+
 
+    this.className += ' click';
 
+    theButtonThe.removeEventListener('mousedown', itsAButton);
 
+
 
+    var click = new Audio('click.mp3');
 
+
 
+    click.volume = .3;
 
+    click.preload = true;
 
+    click.play();
 
+
 
+    var flip = new Audio('whoosh.mp3');
 
+
 
+    flip.volume = .75;
 
+    flip.preload = true;
 
+    flip.play();
 
+
 
+
 
+
 
+    var currentRotation = button.rotation.x;
 
+    TweenMax.to(button.rotation, 8, {
 
+      x: currentRotation + (Math.PI * 2), ease: Power2.easeInOut, onComplete: function () {
 
+        theButtonThe.removeAttribute('class');
 
+        theButtonThe.addEventListener('mousedown', itsAButton);
 
+      }
 
+    });
 
+  }
 
+
 
+  function init() {
 
+
 
+    theButtonThe = document.getElementsByTagName('button')[0];
 
+
 
+    theButtonThe.addEventListener('mousedown', itsAButton);
 
+
 
+    window.addEventListener('resize', update);
 
+
 
+    makeAScene();
 
+  }
 
+
 
+  document.addEventListener("DOMContentLoaded", init);
 
+
 
+})();

+ 72 - 0
fun/button/style.css
View File 

@@ -0,0 +1,72 @@
 
+body {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+.container{
 
+    margin-left: 0;
 
+}
 
+
 
+button {
 
+    position: absolute;
 
+    top: 0;
 
+    right: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    z-index: 1;
 
+    display: block;
 
+    height: 20%;
 
+    width: 50%;
 
+    margin: auto;
 
+    padding: 0;
 
+    font: 300 2em/1em 'Courier New', Courier, monospace;
 
+    border: 0;
 
+    background: transparent;
 
+    color: white;
 
+    cursor: pointer;
 
+    text-align: center;
 
+    text-transform: uppercase;
 
+    letter-spacing: 3px;
 
+    word-spacing: 5px;
 
+    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
 
+    outline: none;
 
+}
 
+
 
+button.click {
 
+    -webkit-animation: color 900ms linear;
 
+    animation: color 900ms linear;
 
+}
 
+
 
+@-webkit-keyframes color {
 
+
 
+    0%,
 
+    20%,
 
+    35%,
 
+    55% {
 
+        color: #19569A;
 
+    }
 
+
 
+    10%,
 
+    30%,
 
+    40%,
 
+    70% {
 
+        color: white;
 
+    }
 
+}
 
+
 
+@keyframes color {
 
+
 
+    0%,
 
+    20%,
 
+    35%,
 
+    55% {
 
+        color: #19569A;
 
+    }
 
+
 
+    10%,
 
+    30%,
 
+    40%,
 
+    70% {
 
+        color: white;
 
+    }
 
+}

File diff suppressed because it is too large
+ 377 - 0
fun/button/three.min.js


+ 109 - 2
fun/index.html
View File 

@@ -15,7 +15,7 @@
 
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
 
     <title>娱乐</title>
 
     <style>
 
-        * {
 
+        *:not(svg, path, g) {
 
             transition-duration: 300ms;
 
         }
 
 
@@ -54,7 +54,6 @@
 
         }
 
 
         img {
 
-            transition-duration: 300ms;
 
             border: 3px dotted grey;
 
             width: 300px;
 
         }
 
@@ -76,10 +75,78 @@
 
             transition: all 0.2s;
 
         }
 
 
+        .btn:hover {
 
+            top: -2px;
 
+        }
 
+
 
         .btn:active {
 
             top: 5px;
 
         }
 
+
 
+        svg {
 
+            margin-top: 1rem;
 
+            width: 30vmin;
 
+            height: auto;
 
+            filter: url(#shadow-large);
 
+        }
 
     </style>
 
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
 
+
 
+    <script>
 
+        const zeroPadded = number => ((number >= 10) ? number.toString() : `0${number}`);
 
+        const twelveClock = (twentyFourClock) => {
 
+            if (twentyFourClock === 0) {
 
+                return 12;
 
+            } if (twentyFourClock > 12) {
 
+                return twentyFourClock - 12;
 
+            }
 
+            return twentyFourClock;
 
+        };
 
+        var tot = 0;
 
+        function getTime() {
 
+            setTimeout(() => {
 
+                var click = new Audio('clock.mp3');
 
+                click.volume = .3;
 
+                click.preload = true;
 
+                click.play();
 
+            }, 900);
 
+            var now = new Date();
 
+            var hours = now.getHours();
 
+            var minutes = now.getMinutes();
 
+            if (now.getSeconds() == 0) tot++;
 
+            console.log(tot, now.getSeconds())
 
+            var seconds = now.getSeconds() + tot * 60;
 
+            var time = {
 
+                hours: twelveClock(hours), // 1-12
 
+                minutes, // 0-59
 
+                seconds, // 0-59
 
+            };
 
+
 
+            var rotation = {
 
+                hours: twelveClock(hours),
 
+                minutes,
 
+                seconds,
 
+            };
 
+
 
+            var entries = Object.entries(time);
 
+            entries.forEach(([key, value]) => {
 
+                console.log((key === 'hours') ? `rotate(${-15 + value * 30})` : `rotate(${value * 6})`)
 
+                anime({
 
+                    targets: `g.${key}`,
 
+                    transform: (key === 'hours') ? `rotate(${-15 + value * 30})` : `rotate(${value * 6})`,
 
+                    duration: 400,
 
+                });
 
+            });
 
+        }
 
+        $().ready(function () {
 
+            const clockFace = $('svg g.clock--face')[0];
 
+            for (let i = 0; i < 12; i += 1) {
 
+                clockFace.innerHTML += `<text transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >${zeroPadded(i + 1)}</text>`;
 
+            }
 
+            getTime();
 
+            setInterval(getTime, 1000);
 
+        })
 
+    </script>
 
 </head>
 
 
 <body itemscope itemtype="http://schema.org/WebPage">
 
@@ -118,6 +185,7 @@
 
                 aria-hidden="true"></span>&nbsp;&nbsp;ChatGPT 测试</a>
 
         <a class="btn btn-success" id="gravity" href="https://太帅了.cn" title="中国人不懂浪漫，这么好的域名让我注册了"><span
 
                 class="glyphicon glyphicon-link" aria-hidden="true"></span>&nbsp;&nbsp;太帅了.cn</a>
 
+        <a class="btn btn-success" href="/minecraft">Minecraft</a>
 
         <div style="text-align:right">
 
             <span class="btn btn-xs btn-warning nohover">纯搬运</span> - <span
 
                 class="btn btn-xs btn-info nohover">小工程</span> -
 
@@ -125,6 +193,45 @@
 
         </div>
 
     </div>
 
     <hr>
 
+    <p>（自我提醒，不要在这浪费太多时间）</p>
 
+    <svg viewBox="0 0 100 100" width="100" height="100">
 
+        <defs>
 
+            <filter id="shadow-large">
 
+                <feDropShadow dx="0" dy="0" stdDeviation="4" />
 
+            </filter>
 
+            <filter id="shadow-small">
 
+                <feDropShadow dx="0" dy="0" stdDeviation="0.2" />
 
+            </filter>
 
+
 
+            <mask id="mask">
 
+                <g transform="translate(50 50)">
 
+                    <g class="hours" transform="rotate(-15)">
 
+                        <circle cx="0" cy="0" r="50" fill="#fff"> </circle>
 
+                        <path d="M 0 -50 v 50 l 28.86 -50" fill="#000"> </path>
 
+                    </g>
 
+                </g>
 
+            </mask>
 
+        </defs>
 
+
 
+        <circle cx="50" cy="50" r="46" fill="#303335"> </circle>
 
+
 
+        <circle cx="50" cy="50" r="42" fill="#EA3F3F" filter="url(#shadow-large)"> </circle>
 
+
 
+        <g class="clock--face" font-size="8px" transform="translate(50 50)" text-anchor="middle"
 
+            dominant-baseline="middle"></g>
 
+        <circle mask="url(#mask)" cx="50" cy="50" r="50" fill="#303335"></circle>
 
+        <circle cx="50" cy="50" r="4" filter="url(#shadow-small)" fill="#303335"></circle>
 
+        <g class="hands" transform="translate(50 50)">
 
+            <g class="minutes" transform="rotate(240)">
 
+                <path fill="#fff" d="M -0.4 8 h 0.8 v -33 h -0.8 z"></path>
 
+                <circle fill="#303335" cx="0" cy="0" r="0.6"></circle>
 
+            </g>
 
+            <g class="seconds" transform="rotate(80)">
 
+                <path fill="#EA3F3F" d="M -0.4 10 h 0.8 v -45 h -0.8 z"></path>
 
+                <circle stroke-width="0.4" stroke="#EA3F3F" fill="#303335" cx="0" cy="0" r="0.8"></circle>
 
+            </g>
 
+        </g>
 
+    </svg>
 
 </body>
 
 
 </html>

Some files were not shown because too many files changed in this diff