backdrop-filter（纯CSS实现丝滑边框线条动画）

合集 - bjjc奇奇怪怪bug(35)

1.uniapp微信小程序uni.request捕获500异常2024-04-16 2.uniapp兼容问题2024-04-17 3.推荐两个好玩的轻提示2024-04-18 4.不够完美但也很能打的2024-04-18 5.uniapp实现刷新页面保留参数页面不报错的情况2024-04-19 6.关于ESLint: Delete `␍`(prettier/prettier) 错误解决方案（3种）2024-04-24 7.loading2024-04-26 8.关于设备像素比2024-04-29 9.js前端去除HTML标签返回纯字符串正则/<[^>]*>/g2024-05-06 10.Js中valueOf和toString区别和使用2024-05-07 11.vscode关于json文件添加注释报错处理2024-05-08 12.使用js有效括号匹配封装函数2024-05-11 13.单项数据流和双向数据绑定的原理，区别2024-05-11 14.CSRF（跨站请求伪造）原理：2024-05-11 15.记录一下现网微信小程序版本ios手机极个别手机关于登录api（别的没试过）不调用的问题，其他的ios可以正常唯独极个别的ios不可以2024-05-15 16.uniapp实现多行文本溢出超过指定行数展开收起2024-05-16 17.uniapp开发抖音小程序跳转2024-05-17 18.css滚动吸附2024-05-19 19.promise(A).catch(f1).then(f2),f1执行后f2回执行吗，为什么2024-05-20 20.国际化怎么做，中文一个字，阿拉伯语很长一串，怎么实现样式的一致2024-05-20 21.页面切换保存怎么实现数据不丢失且记忆滚动条位置，常规的方案会闪一下，不如原生性能，怎么解决2024-05-20 22.nuxtjs锁函数封装2024-05-21 23.css样式让元素得宽度由内容撑开2024-05-22 24.watch vs. watchEffect2024-05-28 25.HEIC2024-05-28 26.Intersection Observer API 是浏览器原生提供的，用于异步检测目标元素与视口或父元素是否产生交叉。它的优势在于提高性能和简化代码实现。2024-05-29

27.backdrop-filter（纯CSS实现丝滑边框线条动画）2024-05-30

28.js中try中定义的数据catch无法访问2024-06-06 29.自动化脚本同步单个平台所有小程序（本质跨平台uniapp但是业务紧急，按需使用）2024-06-18 30.前端资源提示符2024-08-29 31.微信小程序授权弹框2024-09-27 32.关于高度从0到auto的过渡效果2024-11-18 33.split使用注意点2024-11-25 34.js之连续赋值2024-12-18 35.border和outline的区别2024-12-21

即便绝对定位的子盒子视觉上覆盖在父盒子上，导致父盒子的内容或背景不可见，backdrop-filter 依然作用于父盒子自己的背景及背后的内容上。简而言之，backdrop-filter 是针对元素自身及其背后内容的一个效果，它不受该元素内子元素定位方式的影响。因此，即便子盒子“脱标”，父盒子的 backdrop-filter 依然可以对其背后的内容生效，只是可能由于子盒子的遮挡，视觉上不容易直接观察到这一效果。

点击查看代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现丝滑边框线条动画</title>
</head>
<style>
    body {
        background-color: black;
    }

    .outer {
        position: relative;
        width: 400px;
        height: 200px;
        margin: 50px;
        /* 确保有足够空间显示动画 */
        border-radius: 30px;
        overflow: hidden;
        padding: 1px;
    }

    .inner {
        background: rgba(9, 9, 11, 0.38);
        border: 1px solid rgb(30, 41, 59);
        width: 100%;
        height: 100%;
        border-radius: 30px;
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        box-sizing: border-box;
    }

    .moving-element {
        position: absolute;
        top: 0;
        left: 40px;
        width: 80px;
        height: 80px;
        background-image: radial-gradient(#cbacf9 40%, transparent 80%);
        border-radius: 40px;
        animation: moveAround 8s linear infinite;
        transform: translate(-40px, -40px);
    }

    @keyframes moveAround {

        0% {
            left: 40px;
            top: 0px;
        }

        28.93% {
            left: 360px;
            top: 0px;
        }

        33.99% {
            left: 400px;
            top: 40px;
        }

        44.82% {
            left: 400px;
            top: 160px;
        }

        49.88% {
            left: 360px;
            top: 200px;
        }

        78.81% {
            left: 40px;
            top: 200px;
        }

        83.87% {
            left: 0px;
            top: 160px;
        }

        94.70% {
            left: 0px;
            top: 40px;
        }

        100% {
            left: 40px;
            top: 0px;
        }
    }
</style>

<body>
    <div class="outer">
        <div class="moving-element">

        </div>
        <div class="inner">

        </div>

    </div>
</body>

</html>