Week 1 – A-Arin (Copy 4191)

✨ KANTAWIT JONGKRIT

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
    /* แก้ CSS ด้านล่าง*/
:root{
    --0:0;
    --1:10px;
    --2:100%;
}
body{
    background-color: rgb(46, 46, 46);
}
  div{
    width: 320px;
    height: 320px;
    background-color: black;
    margin: auto;
    margin-top: 50px;
    background-image: linear-gradient(to bottom right, red, yellow,rgb(245, 67, 13));
    border: 15px;
    border-style: dashed;
    
  }
  button{
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-weight: bold;
      font-size: 22px;
      margin: 5px;
      margin-top: 40px;
  }
  button:hover{
    opacity: 0.7;
    transform: translateY(-2px); 
    color: rgb(182, 16, 182);
    background-color: rgb(233, 212, 25);
    
}
button:active{
    opacity: 0.5;
    transform: translate(3px);
    background-color: red;
    color: black;
}
  div:hover{
    box-shadow: 0px 0px 300px rgb(107, 13, 107);
    animation: AAA 2s infinite linear;
}
@keyframes AAA{
    0%{
        background-image: linear-gradient(to bottom right, rgb(245, 67, 13), yellow,rgb(135, 219, 25),rgb(27, 226, 226));
        box-shadow: 0px 0px 400px rgb(107, 13, 107);
    }
    35%{
        background-image: linear-gradient(to top left, rgb(245, 67, 13), yellow,rgb(135, 219, 25),rgb(27, 226, 226));
        box-shadow: 0px 0px 200px rgb(211, 109, 211);
    }
    70%{
        background-image: linear-gradient(to bottom left, rgb(245, 67, 13), yellow,rgb(135, 219, 25),rgb(27, 226, 226));
        box-shadow: 0px 0px 400px rgb(107, 13, 107);
    }
    100%{
        background-image: linear-gradient(to top right, rgb(245, 67, 13), yellow,rgb(135, 219, 25),rgb(27, 226, 226));
        box-shadow: 0px 0px 200px rgb(211, 109, 211);
    }
}
    </style>
  </head>
  
  <body>
<div onclick="trans2()"></div>
<center><button onclick="trans('squ')">สี่เหลี่ยม</button>
<button onclick="trans('mol')">ขอบมน</button>
<button onclick="trans('cir')">วงกลม</button></center>

</body>
  <Script>
  var s = document.querySelector("div");
s.style.borderRadius="0%";
function trans(x){
  if (x=="cir"){
    s.style.borderRadius="50%";
  }
  else if (x=="squ"){
    s.style.borderRadius="0%";
  }
 else  if (x="mol"){
    s.style.borderRadius="15%";
  }
}
function trans2(){
  if(s.style.borderRadius=="0%"){
    s.style.borderRadius="15%";
  }
  else if (s.style.borderRadius=="50%"){
    s.style.borderRadius="0%";
  }
  else if (s.style.borderRadius=="15%"){
    s.style.borderRadius="50%";
  }

}
  </Script>
  
</html>