HTML5消息通知/信息提示弹出框设计荟萃 - 页角折入

Notification Styles Inspiration 页面右上角像折纸一样折入一部分，显露隐藏的提示信息。

html5, tooltip, 模板

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<body class="color-2">
    <div class="notification-shape shape-box" id="notification-shape" data-path-to="m 0,0 500,0 0,500 -500,0 z">
        <svg xmlns="https://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
            <path d="m 0,0 500,0 0,500 0,-500 z" />
        </svg>
    </div>
    <div class="container">
        <header class="codrops-header">
            <h1>Notification Styles Inspiration <span>Simple ideas &amp; effects for website notifications</span></h1>
        </header>
        <div class="main clearfix">
            <div class="column">
                <p class="small">Click on the button to show the notification:</p>
                <button id="notification-trigger" class="progress-button">
                    <span class="content">Show Notification</span>
                    <span class="progress"></span>
                </button>
            </div>
        </div>
    </div>
    
    <script src="https://tympanus.net/Development/NotificationStyles/js/classie.js"></script>
    <script src="https://tympanus.net/Development/NotificationStyles/js/notificationFx.js"></script>
    <script>
        (function() {
            var svgshape = document.getElementById('notification-shape'),
                s = Snap(svgshape.querySelector('svg')),
                path = s.select('path'),
                pathConfig = {
                    from: path.attr('d'),
                    to: svgshape.getAttribute('data-path-to')
                },
                bttn = document.getElementById('notification-trigger');

// make sure..
            bttn.disabled = false;

bttn.addEventListener('click', function() {
                // simulate loading (for demo purposes only)
                classie.add(bttn, 'active');
                setTimeout(function() {

path.animate({
                        'path': pathConfig.to
                    }, 300, mina.easeinout);

classie.remove(bttn, 'active');

// create the notification
                    var notification = new NotificationFx({
                        wrapper: svgshape,
                        message: '<p><span class="icon icon-bulb"></span> I\'m appearing in a morphed shape thanks to <a href="https://snapsvg.io/">Snap.svg</a></p>',
                        layout: 'other',
                        effect: 'cornerexpand',
                        type: 'notice', // notice, warning or error
                        onClose: function() {
                            bttn.disabled = false;
                            setTimeout(function() {
                                path.animate({
                                    'path': pathConfig.from
                                }, 300, mina.easeinout);
                            }, 200);
                        }
                    });

// show the notification
                    notification.show();

}, 1200);

// disable the button (for demo purposes only)
                this.disabled = true;
            });
        })();
    </script>
</body>

</html>

Notification Styles Inspiration 页面右上角像折纸一样折入一部分，显露隐藏的提示信息。

html5, tooltip, 模板

编辑器支持Emmet

快捷键

Notification Styles Inspiration 页面右上角像折纸一样折入一部分，显露隐藏的提示信息。

html5, tooltip, 模板

使用HTML5 CSS3模仿IOS 10的弹出消息框动画

12个HTML5有趣的弹性变形动画信息提示框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：