Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.arrow {
width:100px; height:100px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='97.285px' height='97.285px' viewBox='0 0 97.285 97.285' style='enable-background:new 0 0 97.285 97.285;' xml:space='preserve'%3E %3Cpath d='M83.952,34.479L50.056,0.585c-0.781-0.781-2.047-0.781-2.828,0L13.333,34.479c-0.781,0.781-0.781,2.047,0,2.828l9.03,9.031 c0.375,0.375,0.883,0.586,1.414,0.586c0.53,0,1.039-0.211,1.414-0.586l14.534-14.532v63.478c0,1.104,0.896,2,2,2H55.56 c1.104,0,2-0.896,2-2V31.807l14.532,14.532c0.75,0.75,2.078,0.75,2.828,0l9.031-9.031c0.375-0.375,0.586-0.884,0.586-1.414 C84.538,35.364,84.327,34.854,83.952,34.479z'/%3E %3C/svg%3E");
background-repeat: no-repeat;
display:inline-block;
}
.turn {
animation-iteration-count: infinite;
animation-direction:alternate;
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
animation-name: turn;
animation-duration:2s;
}
@keyframes turn{
0% {transform: rotate(0deg);}
20% {transform: rotate(180deg);}
60% {transform: rotate(180deg);}
100% {transform: rotate(0deg);}
}
​
</style>
<script type="text/javascript">
function randomInt(min, max) {
  var x = Math.floor(Math.random() * (max - min)) + min;
  console.log(x);
  return x;
}
function ani(m, s){
    var es = document.getElementsByClassName('arrow');
    for (var i = 0; i < es.length; i++) {
        setTimeout((function(e){
            return function g() {
                e.className ='turn arrow';
                setTimeout(function(){e.className='arrow'}, 2000);
            }
        })(es[i]), randomInt(m, s));
    }
}
</script>
<title>Untitled Document</title>
</head>
​
<body>
<input value="轉頭(0~0)" type="button" onclick="ani(0,0)" />
<input value="轉頭(10~50)" type="button" onclick="ani(10,50)" />
<input value="轉頭(100~200)" type="button" onclick="ani(100,200)" />
<input value="轉頭(100~350)" type="button" onclick="ani(100,350)" />
<input value="轉頭(100~500)" type="button" onclick="ani(100,500)" />
<br><br>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers