Недавно я увидел хороший эффект нажатия кнопки. При щелчке он дал водяную волну и эффект Ripples. Это было довольно весело, поэтому я просто внедрил его (не рассматривая проблему совместимости браузеров с более низкими версиями)
Давайте сначала посмотрим на эффект, как показано на рисунке ниже (запись программного обеспечения GIF немного плохая, похоже, что это Crazi ...)
Этот эффект может быть реализован вложенными каминами внутри элементов или CSS3.
Реализация кадров
Копия кода, реализованного Canves, выбирается в Интернете, слегка удалила несколько дублирующих стилей определения и дала комментарии JS. Код выглядит следующим образом
HTML -код
<a data-color = "#2F5398"> нажмите меня! </a>
CSS -код
* {Box-size: Border-box; схема: нет;} body {font-family: 'open sans'; font-size: 100%; Font-Weight: 300; Line-Height: 1.5em; Text-align: Center;}. Btn {Border: не; 150px; Высота: 40px; текстовое значение: Центр; Линия-высота: 40px; граница-радиус: 5px;}. Btn.color-1 {фоновый цвет: #426fc5;}. Btn-border.color-1 {фоновый цвет: прозрачный; граница: 2px solid #426fc5; #426fc5; {позиция: относительно;}. Канвол-разработки материала {непрозрачность: 0,25; Положение: абсолют; верх: 0; слева: 0;}. Контейнер {Align-Content: Center; Align-Eitems: Flex-Start; Display: Flex; Flex-Riection: Row; Flex-wrap: rup; ustify-content: margin: 0 auto; max-width: 46JS -код
var canvas = {},centerX = 0,centerY = 0,color = '',containers = document.getElementsByClassName('material-design')context = {},element = {},radius = 0,// Generate requestAnimationFrame based on callback requestAnimFrame = function () {return (window.requestAnimationFrame || window.mozRequestAnimationFrame || window.orequestanimationframe ||. {canvas = document.createElement ('canvas'); canvas.addeventlistener ('click', press, false); контейнеры. canvas.offsetheight;}}, // Нажмите и получить необходимые данные, такие как координаты клика, размер элемента, цветовое пресс = function (event) {color = event.toElement.parentelement.dataset.color; element = event.toElement; context.getContext ('2d'); radius = 0; event.Offement; 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.fillstylyse = context. RADIUS += 2, судя о том, что радиус меньше ширины элемента, постоянно нарисуйте круг с радиусом += 2 if (radius <element.width) {requestAnimframe (draw);}}; init ();Реализация CSS3
Далее следует код, который является чисто изготовленным вручную ... Я думаю, что это удобнее для реализации CSS3, может быть, я привык писать CSS ...
HTML -код
<a> Нажмите меня! </a>
CSS -код
.waves {позиция: относительно; курсор: указатель; дисплей: inline block; переполнение: скрыто; Центр; -Webkit-tap-highlight-color: прозрачный; z-index: 1;}. Waves.waves-animation {Положение: абсолют; граница-радий: 50%; ширина: 25px; высота: 25px; непрозрачность: 0; фон: rgba (255,255,2555,0.3); транспортировка: All 0,7s-aby-amest-absiet-aSperty: -Webkit-transform; -webkit-transform: scale (0); преобразование: масштаб (0); Pointer-events: none} .ts-btn {width: 200px; высота: 56px; линия-высота: 56px; фон: #f57035; color: #fff; border-radius: 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; 'undefined'! = typeof target.getBoundingClientRect && (position = target.getBoundingClientRect ()); return {top: windowsempecte -windowsese. ele.clientleft}} var show = function (event) {var pdiv = event.target, cdiv = документ. pdiv.clientwidth / 100 * 10 + ')'; var position = {top: _height + 'px', слева: _left + 'px'}; cdiv.classname = cdiv.classname + "waves-animation", cdiv.setattribute ("style", forstyle (position)), позиционирование ["webk-trans? _Scale, положение ["-moz-transform"] = _scale, position ["-moz-transform"] = _scale, position ["-ms-transform"] = _scale, position ["-o-transform"] = _scale, позиция. «MS», Position ["-Duration-Duration"] = длительность + "MS", положение ["-Durantion-Duration"] = продолжительность + "MS", положение ["-webkit-transt-timing-функция"] = продолжительность + "MS", положение ["-transty-timing-функция"] = "Кубический-кубик (0,250, 0,460, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0.450, 0. 0,940) ", положение ["-Moz-Transition-timing-функция "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ", положение ["-O-транс-timing-функция "] =" Cubic-Bezier (0,250, 0,460, 0,450, 0,940) ", [" Transty-Timing-F-фаркция "] = = = положения"] = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = umbunt "Cubic-Bezier (0,250, 0,460, 0,450, 0,940)", cdiv.setattribute («Стиль», Forstyle (положение)); var finingStyle = {непрозрачность: 0, «Вебкит-трансляция»: продолжительность + «MS», // время переходного времени »-Duransition-duransition-duransition-duransition +"-duransation-duransition + "----- "MS", "-Webkit-Transform": Duration + "MS", "-WebKit-Transform": _Scale, "-Moz-Transform": _Scale, "-MS-Transform": _Scale, "-O-Transform": _Scale, "-O-Transform": _Scale, "-O-Transform": _Scale, "--Onform": "-Tramform": " _Scale, "-Scale,"-Top: _height + "px", слева: _left + "px",}; settimeout (function () {cdiv.setattribute ("style", forstyle (finingStyle)); setTimeout (function () {pdiv.removeChild (cdiv);}, продолжительность);}, 100)} document.queryselector ('. Waves'). AddeventListener ('click', function (e) {show (e);} ,! 1);ОК, это все, кстати, счастливого фестиваля в середине осени ~