최근에 좋은 버튼 클릭 효과를 보았습니다. 클릭 할 때는 물파와 잔물결 효과가 생성되었습니다. 아주 재미 있었으므로 간단히 구현했습니다 (하위 버전 브라우저의 호환성 문제를 고려하지 않음).
아래 그림과 같이 효과를 먼저 살펴 보겠습니다.
이 효과는 내부 요소 내부 또는 CSS3에 의해 중첩 된 캔에 의해 구현 될 수 있습니다.
캔버스 구현
Canves가 구현 한 코드의 사본은 온라인으로 선택되어 일부 중복 정의 스타일을 약간 제거하고 JS 주석을주었습니다. 코드는 다음과 같습니다
HTML 코드
<a data-color = "#2f5398"> 나를 누르십시오! </a>
CSS 코드
* {Box-Sizing : Border-Box; 개요 : None;} Body {Font-Family : 'Open Sans'; 'Open Sans'; Font-Size : 100%; Font-Weight : 300; Line-Height : 1.5EM; Text-Align : Centre;}. 150px; 높이 : 40px; 텍스트-정렬 : 중심; 라인-하이트 : 40px; Border-Radius : 5px;}. btn.color-1 {배경색 : #426fc5;}. btn-border.color-1 {배경색 : 투명; 경계 : 2px solid #426fc5; #426fc5;}. {위치 : 상대;}. 재료 디자인 캔버스 {불투명도 : 0.25; 위치 : 절대; 상단; 상단 : 0; 왼쪽 : 0;}. 컨테이너 {정렬-컨텐츠 : 센터; 정렬-시설 : 플렉스-스테이트; 플렉스; 플렉스 방향 : 행; 플렉스-랩 : 랩; 정당성-대륙 : 0 Auto;JS 코드
var canvas = {{}, centrex = 0, centery = 0, color = ', containers = document.getelementsByclassName ('material-design ') context = {}, element = {}, radius = 0, // 콜백 요청-requestanimationframe {returmationframe || ||. {canvas = document.createElement ( 'canvas'); canvas.adeventListener ( 'click', press, false); 컨테이너 [i] .appendChild (canvas); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canvas Canvas.offSetheight;}}, // 클릭 코디네이트, 요소 크기, 색상 프레스 = 함수 (이벤트) {color = event.toElement.parentElement.dataset.color; element = event.toElement; context = element.getContext ( '2d'); centers = event.cent.cent.cent.cent x = centsex; event.offsety; context.clearRect (0, 0, element.width, element.width, element.Height); draw ();}, // 원을 그리고 애니메이션 graw = function () {context.beginPath (); context.arc (centerx, centery, radius, 0, 2 * math.pi, false); contux.fillStyle =; 2; // 반경이 요소의 너비보다 작다는 것을 판단하여 반경 += 2로 원을 그립니다. 반경 += 2 if (radius <element.width) {requestAnimframe (draw);}}; init ();CSS3 구현
다음은 순전히 손으로 만든 코드입니다 ... CSS3를 구현하는 것이 더 편리하다고 생각합니다. 아마도 CSS를 작성하는 데 익숙 할 것입니다 ...
HTML 코드
<a> 나를 누르십시오! </a>
CSS 코드
.Waves {위치 : 상대; 커서 : 포인터; 디스플레이 : 인라인 블록; 오버플로 : 숨겨진; 텍스트-정렬 : 중심; -webkit-tap-highlight-color : 투명; z-index : 1;}. waves.waves.waves-waves-animation {위치 : 절대; 경계-라디우스 : 50%; 너비 : 25px; 높이 : 25px; 불투명도 : 0; 배경 : RGBA (255,255,255,0.3); 모든 0.7S의 편안함; -webkit-transform; -webkit-transform : scale (0); transform : scale (0); 포인터-이벤트 : none} .t-btn {너비 : 200px; 높이 : 56px; 라인-리이트 : 56px; 배경 : #f57035; 컬러 : #fff; 국경-라디오 : 5px;}.JS 코드
document.adeventListener ( 'domcontentLoaded', function () {var duration = 750; // 스타일 스트링 패치 워크 var forstyle = function (position) {var cssstr = ''; for (var key in position) {if (key) cssstr+= key+'+위치 [key]; 마우스 클릭 위치 var forrect = function (target) {var position = {var position = {top : 0, 왼쪽 : 0}, ele = document.DocumentElement; 'undefined'! = typeof tarting.getBoundingClientRect && (위치 = target.getBoundBientRect ()); return {top : 위치. window.pagexoffset -ele.clientleft}} var show = function (event) {var pdiv = event.target, cdiv = docum rectobj.left, _scale = 'scale (' + pdiv.clientWidth / 100 * 10 + '); var position = {top : _Height +'px ', 왼쪽 : _left +'px '}; cdiv.classname = cdiv.classname + "waves-animation", cdiv.stytatttiptip ( "스타일", CDIV. Forstyle (position)), 위치 [ "-webkit-transform"] = _Scale, 위치 [ "-moz-transform"] = _scale, 위치 [ "-moz-transform, 위치 ["-ms-transform "] = _scale, position ["-o-transform "] = _scale, 위치. "1", 위치 [ "-webkit-transition-guration"] = duration + "ms", 위치 [ "-moz-transition-duration"] = duration + "ms", 위치 [ "-o-transition-rature"] = duration + "ms", 위치 [ "-webkit-transition-timing-function"] = ms "-webkit-transition-transition-transition-transition-transition"]. "Cubic-Bezier (0.250, 0.460, 0.450, 0.940)", 위치 [ "-Moz-Transition-Timing-Function"= "Cubic-Bezier (0.250, 0.460, 0.450, 0.940)", 위치 [ "-o-transition-timing-function"] "cubic-bezier (0.250, 0.460, 0.460, 0.460, 0.460, 0.940) ", 위치 ["전환 타이밍-기능 "] ="입방-베 지어 (0.250, 0.460, 0.450, 0.940), cdiv.setattribute ( "style", forstyle (위치)); var finishtystyle = {efitacity : 0, "-webkit-transition-duration": dogitation + "ms", transition time ", transition" + "ms","-o-transition-duration": duration + "ms","-webkit-transform": duration + "ms","-webkit-transform": _scale,"-moz-transform": _scale,"-ms-transform": _scale,"-o-transform": _scale,"-o-transform": _scale,"-o-transform": _scale, "-scale,"-o-transform ": _scale,"-scale, "-scale,"-상단 : _height + "px", 왼쪽 : _left + "px",}; settimeout (function () {cdiv.setattribute ( "style",”, Forstyle (finishtyle)); settimeout (function () {pdiv.removechild (cdiv);}, duration);}, 100)} document.querySelector ( '. Waves'). addEventListener ( 'click', function (e) {show (e);}, 1);};좋아, 그건 그게 전부 야, 행복한 중반 축제 ~