File: ripple-effect.css

Recommend this page to a friend!
  Classes of Andras Toth   Material Design styled ripple effect   ripple-effect.css   Download  
File: ripple-effect.css
Role: Auxiliary data
Content type: text/plain
Description: stylesheet
Class: Material Design styled ripple effect
Show the ripple effect on a given page element
Author: By
Last change:
Date: 8 years ago
Size: 908 bytes
 

Contents

Class file image Download
.ripple-item { position: relative; overflow: hidden; transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .animate-ripple { /*effect color*/ background-color: hsl(180, 40%, 80%); display: inline-block; position: absolute; border-radius: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: ripple .65s linear; animation: ripple .65s linear } @-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2.5) } } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5) } }