Web Animation API开发实例 - 涟漪动效

点击屏幕触发涟漪（水波）动画

h5, ripple

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1145
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
    <link href="https://web-animations.github.io/web-animations-demos/resources/demo.css" rel="stylesheet" type="text/css" />
    <script src="https://web-animations.github.io/web-animations-demos/components/polymer/polymer.js"></script>
    
    <script src="/libs/web-animations.min.js"></script>
    <style>
        body {
            overflow: hidden;
            background: #2ebcfc;
        }
        div {
            border-radius: 50%;
            background: black;
            width: 300px;
            height: 300px;
            position: absolute;
            opacity: 0.66;
            -webkit-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body touch-action="none">
    <p>点击屏幕触发涟漪（水波）动画</p>
    <script>
        var waves = [];
        var duration = 450;

function Wave(x, y) {
            waves.push(this);
            this.element = document.createElement('div');
            this.element.style.left = 'calc(' + x + 'px - 150px)';
            this.element.style.top = 'calc(' + y + 'px - 150px)';
            this.element.setAttribute('touch-action', 'none');
            this.element.addEventListener('up', up);

var hue = Math.random() * 360;
            this.element.style.backgroundColor = 'hsl(' + hue + ', 85%, 67%)';

document.body.appendChild(this.element);

this.scale = this.element.animate([{
                transform: 'scale(0)'
            }, {
                transform: 'scale(1)'
            }, ], {
                duration: duration,
                easing: 'cubic-bezier(.22,.67,.52,.92)',
                fill: 'forwards',
            });
        }

Wave.prototype = {
            up: function() {
                this.up = function() {};
                this.opacity = this.element.animate([{
                    opacity: 0.66
                }, {
                    opacity: 0
                }, ], {
                    duration: duration,
                    fill: 'forwards',
                });
                this.opacity.onfinish = function() {
                    this.element.remove();
                    waves.splice(waves.indexOf(this), 1);
                }.bind(this);
            }
        };

document.body.addEventListener('down', function(e) {
            waves.forEach(function(wave) {
                wave.up();
            });
            new Wave(e.clientX, e.clientY);
        });

function up() {
            waves.forEach(function(wave) {
                wave.up();
            });
        }

document.body.addEventListener('up', up);
    </script>
</body>

</html>

点击屏幕触发涟漪（水波）动画

h5, ripple

编辑器支持Emmet

快捷键

点击屏幕触发涟漪（水波）动画

h5, ripple

MelonJS 开发实例 - Platformer完整的过关游戏

html5 canvas simplex-noise.js彩带粒子流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：