震動醒目按紐

震動醒目按紐

by wllai2001

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div class='shake btn' style='top:0'>
點我
</div>

CSS

.btn{
  border:2px solid #000;
  width:150px;
  text-align:center;
  cursor: pointer;
  border-radius: 5px;
  line-height: 32px;
  background:#ccc;
  font-family:微軟正黑體;
  position: relative;
}

.shake {
    -webkit-animation: shake .5s;
    animation: shake .5s;
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
}

@keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -1px) rotate(-1deg);
    transform: translate(-1px, -1px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-2px) rotate(1deg);
    transform: translate(-2px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
    transform: translate(2px, 1px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 1px) rotate(-1deg);
    transform: translate(-1px, 1px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-2px, 1px) rotate(0deg);
    transform: translate(-2px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
    transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  to {
    -webkit-transform: translate(1px, -1px) rotate(-1deg);
    transform: translate(1px, -1px) rotate(-1deg);
  }
}

JavaScript

$('.btn').on('mouseover', function () {

  let $btn = $(this);
  let currentTop = $btn.css('left');
  let newTop = parseFloat(currentTop) + 150;
  if(newTop > 500){
  	$btn.css('left', 0);
    //$btn.removeClass('shake');
   
  }else{
  
    //$btn.addClass('shake');
  	$btn.css('left', newTop + 'px');
  }
  let randomNumber = Math.floor(Math.random() * 150); // 0到150之间的随机整数

  $btn.css('top', randomNumber + 'px');
 
	var newone = $btn.clone(true);
  $btn.replaceWith(newone); 

  

 
});