Недавно я увидел хороший эффект нажатия кнопки. При щелчке он дал водяную волну и эффект Ripples. Это было довольно весело, поэтому я просто реализовал его (не рассматривая проблему совместимости браузеров с низкой версией)
Давайте сначала посмотрим на эффект, как показано на рисунке ниже (запись программного обеспечения GIF немного плохая, похоже, что это Crazi ...)
Этот эффект может быть реализован вложенными каминами внутри элементов или CSS3.
Реализация кадров
Копия кода, реализованного Canves, выбирается в Интернете, слегка удалила несколько дублирующих стилей определения и дала комментарии JS. Код выглядит следующим образом
HTML-код: <a data-color = "#2F5398"> нажмите меня! </a>
CSS -код:
* {Box-Size: Border-Box; Схема: нет;} Body {font-family: 'open sans'; размер шрифта: 100%; шрифт-вес: 300; высота линии: 1,5 эм; Text-align: center;}. Btn {border: none; дисплей: встроенный блок; Цвет: белый; переполнение: скрыто; Полевая: 1Rem; Заполнение: 0; Ширина: 150px; Высота: 40px; Текст-альбом: Центр; высота линии: 40px; Border-Radius: 5px;}. Btn.color-1 {фоновое цветное: #426fc5;}. Btn-border.color-1 {фоновое цветное: прозрачное; Граница: 2PX SOLIT #426FC5; Цвет: #426FC5;}. Материал-Десзайн {Положение: относительное;}. Материал-дезора Canvas {непрозрачность: 0,25; позиция: абсолютно; Верх: 0; Слева: 0;}. Контейнер {Align-Content: Center; Align-Items: Flex-Start; дисплей: Flex; Гибкое направление: ряд; Flex-wrap: wrap; Justify-Content: Center; Поле: 0 Авто; максимальная ширина: 46Rem;}JS -код:
var canvas = {}, centerx = 0, centery = 0, color = '', containers = document.getelementsbyclassname ('material-design') context = {}, element = {}, radius = 0, // генерировать requestAnimationFrame Animation на основе Callback requestAnimframe = return (window.RequestAmationFrameFrameFrameFrameFRAMESFRAMESFRAMESFRAMERAMATARAMATARANANAMATIO ||. } (), // генерировать каникулы init = function () {intainers = array.prototype.slice.call (контейнеры); for (var i = 0; i <intainers.length; i += 1) {canvas = document.createElement ('canvas'); canvas.addeventlistener ('Щелкни, нажмите, false); контейнеры [i] .appendChild (Canvas); canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.width = canvas.offsetwidth; canvas.height = canvas.offsetheight; }}, // Нажмите и получить необходимые данные, такие как координаты щелчка, размер элемента, цвет нажатия = function (event) {color = event.toElement.parentelement.dataset.color; element = event.toElement; context = element.getContext ('2d'); радиус = 0; CenterX = Event.OffSetx; centery = event.offsety; context.clearrect (0, 0, element.width, element.height); рисовать(); }, // Нарисуйте круг и выполните анимацию draw = function () {context.beginpath (); Context.arc (CenterX, Centery, Radius, 0, 2 * Math.pi, false); context.fillstyle = color; 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: Scale (0); преобразование: масштаб (0); Pointer-Events: none} .ts-btn {width: 200px; Высота: 56px; высота линии: 56px; Фон: #F57035; Цвет: #fff; граница радиус: 5px;}JS -код
document.addeventlistener ('domcontentloaded', function () {var durition = 750; // Style String Patchwork var forstyle = function (position) {var cssstr = ''; for (var in position) {if (position.hashownproperty (key)) cssstr+= key+':'+position [key]+'; Нажмите «Положение» var forrect = function (target) {var position = {top: 0, слева: 0}, ele = document.documentelement; ele.clientleft}} var show = function (event) {var pdiv = event.target, cdiv = document.createelement ('div'); 'Scale (' + pdiv.clientWidth / 100 * 10 + ')'; _scale, положение ["-moz-transform"] = _scale, position ["-ms-transform"] = _scale, position ["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", позиция ["-drangent webkit-transtion"] = duration + "ms", позиция "moz-duration drangure"] = duration + "MS", "-"-drangation "]" d-durage "] = duration +" MS ","-" Положение ["-Dransition-Duration"] = продолжительность + "MS", положение ["-O-транс-Duration"] = продолжительность + "MS", положение ["Длительность перехода"] = продолжительность + "MS", положение ["-WebKit-Transty-Trком Положение ["-MOZ-транзиция-timing-функция"] = "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", положение ["-O-транс-timing-функция"] = "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", положение ["транс-timing-function". 0,460, 0,450, 0,940) ", cdiv.setAttribute (" стиль ", forstyle (положение)); var finingStyle = {непрозрачность: 0," -ветбкит-транспортная продолжительность ": продолжительность +" MS ", // Время перехода"-миоз-транспорта ": Duration +", MS ","----- Продолжительность + "MS", "-Webkit-Transform": _Scale, "-moz-Transform": _Scale, "-ms-Transform": _Scale, "-O-Transform": _Scale, Top: _height + "px", слева: _left + "px",}; ForStyle (FiningSityle));Все это принципы, и принцип прост. Получить местоположение щелчка> Добавить стиль, кстати, Happy Mid Outumn Festival ~
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.