최근에 좋은 버튼 클릭 효과를 보았습니다. 클릭 할 때는 물파와 잔물결 효과가 생성되었습니다. 그것은 매우 재미 있었기 때문에 단순히 그것을 구현했습니다 (저급 브라우저의 호환성 문제를 고려하지 않음).
아래 그림과 같이 효과를 먼저 살펴 보겠습니다.
이 효과는 내부 요소 내부 또는 CSS3에 의해 중첩 된 캔에 의해 구현 될 수 있습니다.
캔버스 구현
Canves가 구현 한 코드의 사본은 온라인으로 선택되어 일부 중복 정의 스타일을 약간 제거하고 JS 주석을주었습니다. 코드는 다음과 같습니다
html 코드 : <a data-color = "#2f5398"> 나를 누르십시오! </a>
CSS 코드 :
* {Box-Sizing : Border-Box; 개요 : None;} Body {Font-Family : 'Open Sans'; 글꼴 크기 : 100%; 글꼴 중량 : 300; 라인 높이 : 1.5EM; 텍스트-정렬 : 센터;}. btn {국경 : 없음; 디스플레이 : 인라인 블록; 색상 : 흰색; 오버플로 : 숨겨진; 여백 : 1REM; 패딩 : 0; 너비 : 150px; 높이 : 40px; 텍스트 정렬 : 센터; 라인 높이 : 40px; Border-Radius : 5px;}. btn.color-1 {배경색 : #426fc5;}. 국경 : 2px 고체 #426FC5; 색상 : #426fc5;}. 자재 디자인 {위치 : 상대;}. 자재 디자인 캔버스 {불투명도 : 0.25; 위치 : 절대; 상단 : 0; 왼쪽 : 0;}. 컨테이너 {정렬-콘텐츠 : 중앙; 정렬 구조 : Flex-Start; 디스플레이 : Flex; 플렉스 방향 : 행; 플렉스 랩 : 랩; 정당화 컨텐츠 : 센터; 여백 : 0 Auto; Max-Width : 46rem;}JS 코드 :
var canvas = {{}, centrex = 0, centery = 0, color = ', containers = document.getElementsByClassName ('material-design ') context = {}, element = {}, radius = 0, // Callback QuestAnimframe = function (return) {returnimationFrame | Window.MozRequestAnimationFrame || } (), // 캔브 생성 init = function () {컨테이너 = array.prototype.slice.call (컨테이너); for (var i = 0; i <containers.length; i += 1) {canvas = document.createElement ( 'canvas'); canvas.addeventListener ( 'click', press, false); 컨테이너 [i]. AppendChild (캔버스); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canvas.offsetwidth; Canvas.height = canvas.offsetheight; }}, // 클릭 코디네이트, 요소 크기, 색상 누르기 = 함수 (이벤트) {color = event.toElement.parentElement.dataset.color; 요소 = 이벤트. context = element.getContext ( '2d'); 반경 = 0; centerx = event.offsetx; Centery = event.offsety; context.clearRect (0, 0, element.width, emect.height); 그리다(); }, // 원을 그리고 애니메이션 graw = function () {context.beginpath (); context.arc (centerx, centery, radius, 0, 2 * math.pi, false); Context.FillStyle = 색상; context.fill (); 반경 += 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-Animation {위치 : 절대; 국경-라디우스 : 50%; 너비 : 25px; 높이 : 25px; 불투명도 : 0; 배경 : RGBA (255,255,255,0.3); 전환 : 모든 0.7 초의 용이성; 전환-프로퍼티 : 변환, 불투명도, -webkit transform; -webkit 변환 : 스케일 (0); 변환 : 스케일 (0); 포인터-이벤트 : 없음} .ts-btn {너비 : 200px; 높이 : 56px; 라인 높이 : 56px; 배경 : #F57035; 색상 : #fff; Border-Radius : 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 = {top : 0 : 0}, ele = documentElement; window.pagexoffset -ele.clientleft}} var show = {var pdiv = event.target.createelement ( 'div'); _Scale = 'scale (' + pdiv.clientWidth / 100 * 10 + '); = _Scale, 위치 [ "-moz-transform"] = _scale, 위치 [ "-s-transform"] = _scale, 위치 [ "-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", 위치 [ "-webkit-transition-hpation"] = degration + "ms"-moz-tranition gater + "moz transition +"ms ". 위치 [ "-O- 전환 기간"] = 지속 시간 + "MS", 위치 [ "-O- 전환 기간"] = 지속 시간 + "MS", 위치 [ "전환 시간"] = 지속 시간 + "MS", 위치 [ "-WebKit-Transition-Timing-Function"] = "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- 전환-타이밍-기능"] = "Cubic-bezier (0.250, 0.460, 0.450, 0.940)", 위치 [ ""Cubic-function "="Cubic-feier "="Cubic-Function "= 0.460, 0.450, 0.940) ", cdiv.setattribute ("style ", forstyle (position)); var finishtystyle = {불투명도 : 0,"-webkit-transition-duration ": duration +"ms ", // 전이 시간"-moz-transition-duration ": moz-transition +"ms ","-o- 트랜스 턴스 ": deration +"ms + "" "" "" "" "." "ms", "-webkit-transform": _scale, "-moz-transform": _scale, "-ms-transform": _scale, "-o-transform": _scale, top : _height + "px", left : _left + "px",}; Fortstyle (finishstyle));이 모든 것이 원칙이며 원칙은 간단합니다. 클릭 위치 가져 오기> 스타일 추가, 행복한 중반 축제 ~
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.