- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Examples</title>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <link href=""rel="stylesheet">
- <style>
- @import url("https://fonts.googleapis.com/CSS?family=Roboto:400,400i,700");
- [anim="ripple"] {
- position: relative;
- overflow: hidden;
- }
- [anim="ripple"]:before {
- content: '';
- position: absolute;
- display: block;
- background: var(--ripple-background, white);
- border-radius: 50%;
- pointer-events: none;
- top: calc(var(--y) * 1px);
- left: calc(var(--x) * 1px);
- width: calc(var(--d) * 1px);
- height: calc(var(--d) * 1px);
- opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
- -webkit-transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
- transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
- -webkit-transform: translate(-50%, -50%) scale(var(--s, 1));
- transform: translate(-50%, -50%) scale(var(--s, 1));
- -webkit-transform-origin: center;
- transform-origin: center;
- }
- button {
- --ripple-background: white;
- --ripple-opacity: 0.3;
- --ripple-duration: 600ms;
- border: 1px solid #e02200;
- border-radius: 0;
- padding: 0.75em 3em;
- font-size: 1em;
- outline: none;
- display: block;
- background: tomato;
- color: white;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- min-width: 200px;
- text-align: center;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- a {
- --ripple-background: black;
- --ripple-opacity: 0.1;
- --ripple-duration: 600ms;
- display: block;
- margin-top: 1em;
- padding: 0.75em 3em;
- background: whitesmoke;
- color: black;
- text-decoration: none;
- border: 1px solid gainsboro;
- min-width: 200px;
- text-align: center;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-transition: background-color 300ms;
- transition: background-color 300ms;
- }
- a:hover {
- background-color: #ededed;
- }
- .rainbow {
- --ripple-opacity: 1;
- --ripple-background: radial-gradient(circle at center, rebeccapurple, dodgerblue, olive, gold, orange, tomato);
- --ripple-duration: 2000ms;
- --ripple-easing: cubic-bezier(0, .5, .5, 1);
- background-color: skyblue;
- color: rgba(255, 255, 255, 0.7);
- -webkit-transition: background-color 300ms, color 300ms;
- transition: background-color 300ms, color 300ms;
- }
- .rainbow:hover {
- background-color: #b3e0f2;
- color: white;
- }
- html {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- *,
- *::before,
- *::after {
- -webkit-box-sizing: inherit;
- box-sizing: inherit;
- }
- html,
- body {
- height: 100%;
- font-family: Roboto, sans-serif;
- }
- body {
- margin: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- }
- h1 {
- font-size: 1.2em;
- }
- </style>
- </head>
- <body>
- <h1 > 使用 CSS 变量的纹波效果 </h1>
- <span>
- <button anim="ripple">Button</button>
- <a href="#" anim="ripple">Link</a>
- <a class="rainbow" href="#" anim="ripple">Rainbow</a>
- <script type="text/javascript">
- [].map.call(document.querySelectorAll('[anim="ripple"]'), el=> {
- el.addEventListener('click',e => {
- e = e.touches ? e.touches[0] : e;
- const r = el.getBoundingClientRect(), d = Math.sqrt(Math.pow(r.width,2)+Math.pow(r.height,2)) * 2;
- el.style.cssText = `--s: 0; --o: 1;`; el.offsetTop;
- el.style.cssText = `--t: 1; --o: 0; --d: ${d}; --x:${e.clientX - r.left}; --y:${e.clientY - r.top};`
- })
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/26894/dbb25858ff807a2e49ddf30d9e8f5c99.html