zoukankan      html  css  js  c++  java
  • 通过模糊来弱化背景

    《css揭秘》中,通过模糊来弱化背景效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Title</title>
        <style>
            main {
                    transition: .6s;
                    background: white;
                }
            main.de-emphasized {
                -webkit-filter: blur(3px);
                filter: blur(3px);
            }
            dialog {
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 1;
                 10em;
                padding: 2em;
                /*margin: -5em;*/
                border: 1px solid silver;
                border-radius: .5em;
                box-shadow: 0 .2em .5em rgba(0, 0, 0, .5),
                0 0 0 100vmax rgba(0, 0, 0, .2);
                transform: translate(-50%, -50%);
            }
            dialog:not([open]) {
                display: none;
            }
            body {
                font: 150%/1.6em Baskerville, Palation, serif;
            }
        </style>
    </head>
    <body>
    <dialog>O HAI, I’m a dialog. Click on me to dismiss.</dialog>
    <main>
        <button>Show dialog</button>
        <p>
            Show dialog
            Bacon ipsum dolor sit amet consectetur short loin ut tri-tip alcatra ground round jowl beef meatloaf in pork. Elit chicken ea spare ribs. Shank andouille ex boudin picanha turkey esse. Do doner fugiat tongue.
    
            Pork chop ad cow spare ribs capicola ball tip alcatra cillum magna short ribs tempor. Pork loin do sint magna ea pork belly duis. Shoulder ullamco chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip ham hock non brisket pig cupim commodo ball tip nulla turkey kielbasa corned beef flank. Hamburger pariatur ham, porchetta cupidatat sirloin pork loin quis nulla culpa tail esse.
    
            Chuck filet mignon flank pork chop mollit enim veniam sed pork loin aliquip sausage prosciutto in deserunt. Nostrud porchetta non nulla sunt. Cupim et velit picanha laborum salami capicola exercitation alcatra sausage cillum shoulder minim esse. Pig boudin aliquip aute, tail ut cow incididunt short loin aliqua.
    
            Et dolor occaecat dolore doner shoulder. Swine pancetta tri-tip irure turducken, kevin est meatball aliqua aute quis ham venison sunt. Consequat pancetta sint beef turkey. Fugiat occaecat commodo, short ribs corned beef aliquip elit eiusmod pork belly ut eu tri-tip. Sint aute picanha proident corned beef ad beef dolore landjaeger. Laboris est deserunt tempor, bresaola ham hock non brisket frankfurter ad leberkas aute sirloin. Minim et ribeye shank pork loin sint corned beef ball tip dolor.
    
            Doner alcatra pastrami pig, strip steak eu in frankfurter occaecat in filet mignon chuck short loin nulla meatloaf. Adipisicing aliqua kielbasa nulla proident. Ground round meatloaf kevin, shank adipisicing pork frankfurter t-bone spare ribs cupidatat. Sed ham non duis enim, in ipsum fugiat est tongue short ribs ad bresaola prosciutto. Non minim picanha, ad in occaecat fugiat veniam dolor deserunt.
        </p>
    </main>
    
    <script>
        function $(sle) {
            return document.querySelector(sle);
        }
        var dialog = $('dialog');
        var main = $('main');
        $('button').onclick = function () {
            dialog.setAttribute('open', '');
            main.classList.add('de-emphasized');
        };
        dialog.onclick = function () {
            if (dialog.close) {
                dialog.close();
            } else {
                dialog.removeAttribute('open');
            }
            main.classList.remove('de-emphasized');
        }
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    二叉排序树的建立_查找_插入_删除
    java学习书籍推荐
    Java之路——敬JAVA初学者(作者:MoMo)
    结构体的定义及应用
    java获取缓存通用类
    金额转换为自定义字符串
    WebApi接入Swagger
    webApi的控制台服务
    自动生成缓存Key值的CacheKeyHelper
    DictionaryHelper2
  • 原文地址:https://www.cnblogs.com/scnuwangjie/p/6053174.html
Copyright © 2011-2022 走看看