js 클릭 버튼을 사용한 물결 효과 코드 (CSS3와 Canves)

최근 좋은 버튼 클릭 효과를 보았습니다. 클릭할 때 물파 효과가 나타나서 재미있게 느껴졌습니다. 그래서 간단하게 구현해 봤습니다.(저버전 브라우저 호환성 문제를 고려하지 않았습니다)　

먼저 효과를 보세요. 다음 그림과 같습니다 (기록 gif 소프트웨어가 약간 거뜬해서 멈춰있는 느낌입니다...)

　

이 효과는 요소 내 캔버스 내장으로 구현할 수도 있으며, 또는 css로도 구현할 수 있습니다3구현.　

Canves 구현　

온라인에서 캔버스 구현 코드를 따랐으며, 중복 정의된 스타일을 조금 줄였고 js 주석을 제공하였습니다. 코드는 다음과 같습니다　

html 코드:<a class="btn color-1 material-design" data-color="#2f5398">Press me!<>/a>

css 코드:　

* {
 box-sizing: border-box;
 outline: none;
}
body {
 font-family: 'Open Sans';
 font-size: 100%;
 font-weight: 300;
 line-height: 1.5em;
 text-align: center;
}
.btn {
 border: none;
 display: inline-block;
 color: white;
 overflow: hidden;
 margin: 1rem;
 padding: 0;
 width: 150px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border-radius: 5px;
}
.btn.color-1 {
 background-color: #426fc5;
}
.btn-border.color-1 {
 background-color: transparent;
 border: 2px solid #426fc5;
 color: #426fc5;
}
.material-design {
 position: relative;
}
.material-design canvas {
 opacity: 0.25;
 position: absolute;
 top: 0;
 left: 0;
}
.container {
 align-content: center;
 align-items: flex-start;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 margin: 0 auto;
 max-width: 46rem;
}

js 코드:

var canvas = {},
  centerX = 0,
  centerY = 0,
  color = '',
  containers = document.getElementsByClassName('material',-design')
  context = {},
  element = {},
  radius = 0,
  // callback을 기반으로 requestAnimationFrame 애니메이션 생성
  requestAnimFrame = function () {
   return (
    window.requestAnimationFrame    || 
    window.mozRequestAnimationFrame  || 
    window.oRequestAnimationFrame   || 
    window.msRequestAnimationFrame   || 
    function (callback) {
     window.setTimeout(callback, 1000 / 60);
    }
   );
  } (),
  // 지정된 각 요소에 canves 생성
  init = function () {
   containers = Array.prototype.slice.call(containers);
   for (var i = 0; i < containers.length; i += 1) {
    canvas = document.createElement('canvas');
    canvas.addEventListener('click', press, false);
    containers[i].appendChild(canvas);
    canvas.style.width ='100%';
    canvas.style.height='100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
   }
  },
  // 클릭하고 필요한 데이터를 가져오세요. 예를 들어, 클릭 좌표, 요소 크기, 색상
  press = function (event) {
   color = event.toElement.parentElement.dataset.color;
   element = event.toElement;
   context = element.getContext('2d');
   radius = 0;
   centerX = event.offsetX;
   centerY = event.offsetY;
   context.clearRect(0, 0, element.width, element.height);
   draw();
  },
  // 원형을 그려서 애니메이션을 실행합니다
  draw = function () {
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
   context.fillStyle = color;
   context.fill();
   radius += 2;
   // 반지름이 요소 너비보다 작을 때까지 반복하여 draw radius += 2 의 원형
   if (radius < element.width) {
    requestAnimFrame(draw);
   }
  };
init();

CSS3실현　

그리고 다음은 순수히 손으로 작성된 코드입니다... CSS가 좋아보이네요...3실현하기 쉬웠을 가능성이 있어요, CSS 쓰는 습관이었던 것 같아요...　

html 코드　

<a class="waves ts-btn">Press me!</a>

css 코드　

.waves{
  position:relative;
  cursor:pointer;
  display:inline-block;
  overflow:hidden;
  text-align: center;
  -webkit-tap-highlight-color:transparent;
  z-index:1;
}
.waves .waves-animation{
  position:absolute;
  border-radius:50%;
  width:25px;
  height:25px;
  opacity:0;
  background:rgba(255,255,255,0.3);
  transition:all 0.7s ease-out;
  "transition"-property:transform, opacity, -webkit-transform;
  -webkit-transform:scale(0);
  transform:scale(0);
  pointer-events:none
}
.ts-btn{
  width: 200px;
  height: 56px;
  line-height: 56px;
  background: #f57035;
  color: #fff;
  border-radius: 5px;
}

js 코드　

 document.addEventListener('DOMContentLoaded',function(){}
   var duration = 750;
   // 스타일 string 조합
   var forStyle = function(position){}
    var cssStr = '';
    for( var key in position){
     if(position.hasOwnProperty(key)) cssStr += key+:+position[key]+';';
    };
    return cssStr;
   }
   // 获取鼠标点击位置
   var forRect = function(target){
    var position = {
     top:0,
     left:0
    }, ele = document.documentElement;
    'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
    return {
      top: position.top + window.pageYOffset - ele.clientTop,
      left: position.left + window.pageXOffset - ele.clientLeft
    }
   }
   var show = function(event){
    var pDiv = event.target,
     cDiv = document.createElement('div');
    pDiv.appendChild(cDiv);
    var rectObj = forRect(pDiv),
     _height = event.pageY - rectObj.top,
     _left = event.pageX - rectObj.left,
     _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
    var position = {
     top: _height+'px',
     left: _left+'px'
    };
    cDiv.className = cDiv.className + " waves"-animation
    cDiv.setAttribute("style", forStyle(position)),
    position["-webkit-transform"] = _scale,
    position["-moz-transform"] = _scale,
    position["-ms-transform"] = _scale,
    position["-o-transform"] = _scale,
    position.transform = _scale,
    position.opacity = ""1",
    position["-webkit-"transition"-duration"] = duration + "ms",
    position["-moz-"transition"-duration"] = duration + "ms",
    position["-o-"transition"-duration"] = duration + "ms",
    position["transition"-duration"] = duration + "ms",
    position["-webkit-"transition"-timing-function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-moz-"transition"-timing-function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-o-"transition"-timing-function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["transition"-timing-function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    cDiv.setAttribute("style", forStyle(position));
    var finishStyle = {
     opacity: 0,
     "-webkit-"transition"-"duration": duration + "ms",  // 이동 시간
     "-moz-"transition"-"duration": duration + "ms",
     "-o-"transition"-"duration": duration + "ms",
     "transition"-"duration": duration + "ms",
     "-webkit-transform" : _scale,
     "-moz-transform" : _scale,
     "-ms-transform" : _scale,
     "-o-transform" : _scale,
     top: _height + "px",
     left: _left + "px",
    };
    setTimeout(function(){
     cDiv.setAttribute("style", forStyle(finishStyle));
     setTimeout(function(){
      pDiv.removeChild(cDiv);
     },duration);
    },100)
   }
   document.querySelector('.waves').addEventListener('click',function(e){
    show(e);
   },!1);
  },!1);

이렇게 되면 원리도 간단합니다. 클릭 위치를 가져오기 > 스타일 추가.顺便，中秋快乐~

이것이 이 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바랍니다. 또한, 나대로 강의를 많이 지지해 주시길 바랍니다.

성명: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자가 모두 소유하고 있습니다. 이 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있다면, 이메일을 notice#w로 보내 주시기 바랍니다.3codebox.com에 이메일을 보내면 (#을 @으로 변경하십시오) 신고를 해 주시고 관련 증거를 제공하십시오. 실제로 확인되면, 이 사이트는 즉시 저작권 침해 내용을 삭제합니다.