原来你是这样的毛玻璃

最新推荐文章于 2024-09-08 17:00:00 发布

转载最新推荐文章于 2024-09-08 17:00:00 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Man-Dream-Necessary/p/6652847.html

本文介绍了一种使用CSS实现毛玻璃效果的优雅方法，并通过实际示例代码展示了如何设置背景图片、透明度及模糊程度等关键属性。

以前写毛玻璃用的都是图层覆盖-->传送门，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：

<!DOCTYPE html>
<html>

<head>
    <title>原来你是这样的毛玻璃</title>
    <meta charset="utf-8">
</head>
<style>
    @keyframes ants {
        to {
            background-position: 100%;
        }
    }

    body, main:before {
        background: url("demoImages/1.jpg") 0 /cover fixed;
    }

    main {
        position: relative;
        background: hsla(0, 0%, 100%, .3);
        overflow: hidden;
        display: block;
        margin: 200px auto;
        width: 1000px;
        height: 500px;
    }

    main:before {
        content: '';
        position: absolute;
        top: 0%;
        right: 0%;
        left: 0%;
        bottom: 0%;
        filter: blur(10px);
        margin: -30px;
    }

    .demoBox {
        border: .5em solid transparent;
        background: linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
        animation: ants 12s linear infinite;
    }

    .demo {
        position: relative;
        z-index: 999;
        font-size: 5em;
        text-align: center;
        line-height: 5;
        font-weight: 100;
    }

</style>
<body>
<main class="demoBox">
    <div class="demo">原来你是这样的毛玻璃</div>
</main>
</body>

</html>


效果图：

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/6652847.html