原质化设计基于SVG的纸面涟漪动效

Material Design Ripple with SVG。原质化设计的一个主要思路是想把物理世界的材料实感（如纸张）和数字世界的技术魔法有效融合起来形成新的交互材料。点击屏幕中的蓝色纸张可以看到Ripple动效。

svg，ripple

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2132
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

function init(evt) {
                svgDocument = evt.target.ownerDocument;
                wrapper = evt.target.outerHTML;
                BBox = evt.target.getBBox();
                rect = evt.target.getBoundingClientRect();
                var btn = svgDocument.getElementById('btn');
                var ripple = svgDocument.getElementById('ripple');
                btn.addEventListener('click', moveCircle);
            }

function moveCircle(evt) {
                ripple.setAttribute('cx', evt.offsetX);
                ripple.setAttribute('cy', evt.offsetY);
            }
        </script>
    </svg>
</svg>

Material Design Ripple with SVG。原质化设计的一个主要思路是想把物理世界的材料实感（如纸张）和数字世界的技术魔法有效融合起来形成新的交互材料。点击屏幕中的蓝色纸张可以看到Ripple动效。

svg，ripple

编辑器支持Emmet

快捷键

Material Design Ripple with SVG。原质化设计的一个主要思路是想把物理世界的材料实感（如纸张）和数字世界的技术魔法有效融合起来形成新的交互材料。点击屏幕中的蓝色纸张可以看到Ripple动效。

svg，ripple

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：