blog css新特性（包含草案）

动态模糊（Motion Blur

提案

当你拍摄一个物体（或是一个人），就像下图，这个模糊就会发生，因为这个物体（人运动）移动的速度超过了相机拍摄所需的曝光时间，所以这个物体会在最终的照片中出现多次，因为它在关键时刻移动。

目前动态模糊目前是提案中 https://github.com/w3c/csswg-drafts/issues/3837

<style>
        body {
            display: flex;
            width: 100vw;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        body > .ball,
        body > .motion-ball {
            position: absolute;
            top: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #313131;
        }
        
        @keyframes move-forever {
            0% {
                top: 0;
            }


            50% {
                top: 300px;
            }

            100% {
                top: 0;
            }
        }

        .ball {
            left: 0;
            animation: move-forever 2s ease-in-out infinite;
        }

        .motion-ball {
            right: 0;
            animation: move-forever 2s  ease-in-out infinite;
            motion-blur: blur;
            motion-shutter-angle: 180deg;
        }
    </style>
</head>
<body>
    <div class="ball"></div>
    <div class="motion-ball blurjs"></div>
</body>
// https://www.motionblurjs.com/
<script src = "https://www.motionblurjs.com/blur.js"></script>

相关推荐 svg 可以通过svg中的滤镜来模拟动态模糊效果

Nov 01 '20 15:11 jindada

scroll-timeline

开发中，滚动到那个位置，触发什么样的操作是很常见的需求，但是现在大都采用js来帮助实现

现在又一个关于这方面的CSS草案，即 Scroll-linked Animations。也就是说，在未来，我们可以直接使用CSS的 scroll-timeline属性来实现前面提到的一些动画效果。

<style>
    main {
        height: 1000vh;
        text-align: center;
        line-height: 100vh;
    }
    body {
        margin: 0;
        background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
        background-size: 100% calc(100% - 100vh);
    }
    body::before {
        content: '';
        position: fixed;
        top: 5px;
        bottom: 0;
        width: 100%;
        z-index: -1;
        background: white;
    }
    /* 
     * 用于检测用户的系统是否被开启了动画减弱功能
     * https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion
     */
    @media (prefers-reduced-motion: no-preference) {
        @scroll-timeline progress-timeline {
            source: selector(#body);
            start: 0;
            end: 100%;
        }

        @keyframes progress {
            to { width: 100%; }
        }

        #progress {
            position: fixed;
            top: 0;
            width: 0px;
            height: 30px;
            background: red;
            animation: 1s linear forwards progress progress-timeline;
        }
    }
</style>
<body>
    <main>
        <h1>在这个区域内滚动鼠标</h1>
    </main>
</body>

相关推荐 https://www.cnblogs.com/coco1s/p/9453938.html

Nov 01 '20 15:11 jindada

gap

用来设置网格行与列之间的间隙

chrome 66+ safari 不支持

<style>
    /** */
    body {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    body > div {
        width: calc((100% - 20px) / 3);
        height: 100px;
        background: red;
    }
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

Nov 01 '20 15:11 jindada

prefers-color-scheme

CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

chrome 76+ safari 12+

prefers-color-scheme

<style>
    body {
        margin: 0;
        background: green;
    }

    @media (prefers-color-scheme: dark) {
        body {
            background: red;
        }
    }
</style>
<body>
</body>

Nov 01 '20 15:11 jindada

CSS.registerProperty

chrome 78+ safari 不支持

registerProperty https://www.w3.org/TR/css-variables-1/

<style>
    /** https://www.w3.org/TR/css-variables-1/ */
    :root {
        --color: orange;
    }
    body {
        font-size: 60px;
        color: var(--color);
        /** --colorPrimary: yellow; */
        background-color: var(--colorPrimary); /* magenta */
    }
</style>
<body>
    <span>hello</span>
</body>
<script>
    CSS.registerProperty({
        name: '--colorPrimary',
        syntax: '<color>',
        initialValue: 'red',
        inherits: false
    });
</script>

Nov 01 '20 15:11 jindada

利用svg实现文字外边框

Nov 01 '20 15:11 jindada

aspect-ratio

chrome 不支持 safari 不支持

aspect-ratio 是 CSS Box Sizing Module Level 4 模块中的一个用来计算元素盒子宽高比的属性

<div id=container style="height: 100px; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

Nov 01 '20 15:11 jindada