Welcome to CODEBOX! (Branch 2207) (Copy 2219)
✨ นายกฤติน กลิ่นแก้ว
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ box-sizing: border-box; padding: 0; margin: 0; outline: none; } body{ font-family: Open-Sans; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background: #000; background-size: cover; } .mainbox{ position: relative; width: 500px; height: 500px; } .mainbox:after{ position: absolute; content: ''; width: 120px; height: 120px; background: url('') no-repeat; background-size: 120px; left: -32px; top: 50%; transform: translateY(-50%) rotate(90deg); } .box{ width: 100%; height: 100%; position: relative; border-radius: 50%; border: 10px solid #fff; overflow: hidden; } span{ width: 50%; height: 50%; display: inline-block; position: absolute; } .span1{ clip-path: polygon(0 92%, 100% 50%, 0 8%); background-color: #ffeb3b; top: 120px; left: 0; } .span2{ clip-path: polygon(100% 92%, 0% 50%, 100% 8%); background-color: #e91e63; top: 120px; right: 0; } .span3{ clip-path: polygon(50% 0%, 8% 100%, 92% 100%); background-color: #4caf50; bottom: 0; left: 120px; } .span4{ clip-path: polygon(50% 100%, 92% 0, 8% 0); background-color: #3f51b5; top: 0; left: 120px; } .box2{ width: 100%; height: 100%; transform: rotate(-135deg); } .box2 .span1{ clip-path: polygon(0 92%, 100% 50%, 0 8%); background-color: #ffeb3b; top: 120px; left: 0; } .box2 .span2{ clip-path: polygon(100% 92%, 0% 50%, 100% 8%); background-color: #e91e63; top: 120px; right: 0; } .box2 .span3{ clip-path: polygon(50% 0%, 8% 100%, 92% 100%); background-color: #4caf50; bottom: 0; left: 120px; } .box2 .span4{ clip-path: polygon(50% 100%, 92% 0, 8% 0); background-color: #3f51b5; top: 0; left: 120px; } img{ width: 70px; height: 70px; line-height: 65px; border-radius: 50%; font-size: 26px; text-align: center; background-color: #fff; position: absolute; top: var(--top); left: var(--left); bottom: var(--bottom); right: var(--right); transform: translate(-50%, -50%); box-shadow: inset 0 3px 3px 0 #717171; } .spin{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; background-color: #ff5722; color: #fff; box-shadow: 0 5px 20px #000; font-weight: bold; font-size: 22px; cursor: pointer; overflow: hidden; } .spin:active{ width: 130px; height: 130px; font-size: 20px } .spin img{ left: -2px; top: -2px; width: 130px; height: 130px; animation: ta 5s linear infinite; background: transparent; } @keyframes ta { from{ transform: rotateZ(0deg); } to{ transform: rotateZ(360deg); } } </style> </head> <body> <div class="mainbox"> <div id="boxxes" class="box"> <div class="box1"> <span class="span1"><img src="https://i.imgur.com/YQMTwYP.png" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> <span class="span2"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> <span class="span3"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> <span class="span4"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> </div> <div class="box2"> <span class="span1"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> <span class="span2"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> <span class="span3"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> <span class="span4"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span> </div> </div> <button class="spin"><img src="https://imgur.com/LVsV10v.png" alt="" onclick="myfunction()"></button> </div> <script> myfunction(){ var x = 1024; var y = 9999; var mum = Math.floor(Math.random()*(x-y)) + y; document.getElementById('boxxes').style.transform = "rotate(${mum}deg)""; } </script> </body> </html>