CSS-小实例动态发光波纹-五八三

CSS实现动态发光波纹-常见小案例

大家应该都刷过抖音吧，看到下面这张图片熟悉不。没错，这就是抖音上用户进行直播时，直播用户的头像出现的效果。我们可以看到它的头像上面会自带一个光圈一直在闪。其实这种效果在好多场景里都出现了。比如附近交友雷达的效果，然后听歌的时候显示音效效果。

那么这种效果应该怎么实现呢？看完这篇文章，保管你受益匪浅。

开rush

可以看到页面上有三个小图标，三个图标可以自己向外发散，其实这种效果主要就是加个动画，然后给它加一个阴影。当我们移到它顶部时，它的动画效果就会消失。移开又会出现。

说明一下，我这里的小图标是引入的一个外部的库。

给第一个链接添加蓝色背景，

 /* 设置链接和波纹的样式 */
        .pulse {
            width: 3rem;
            /* 设置链接的宽度 */
            color: #fff;
            /* 设置字体颜色为白色 */
            transition: all .5s ease;
            /* 设置过渡效果 */
            background: #35D1E6;
            /* 设置背景颜色为蓝色 */
        }

给它添加蓝色的阴影 3秒无限循环

 .pulse,
        .pulse::before,
        .pulse::after {
            content: "";
            /* 设置伪元素的内容为空 */
            display: grid;
            /* 设置网格布局 */
            grid-area: 1/1;
            /* 设置元素占据整个网格 */
            aspect-ratio: 1;
            /* 设置宽高比为 1:1 */
            border-radius: 50%;
            /* 设置圆形边框半径 */
            box-shadow: 0 0 0 0 #35D1E633;
            /* 设置波纹的阴影 */
            animation: pulsing 3s linear infinite;
            /* 设置动画效果 */
        }
        
         /* 设置 pulsing 动画的关键帧 */
        @keyframes pulsing {
            to {
                box-shadow: 0 0 0 6rem #0000;
                /* 设置波纹的阴影效果 */
            }
        }

hover 与聚焦取消阴影

 /* 鼠标悬停链接时的样式 */
        .pulse:hover,
        .pulse:focus {
        animation: none;
        /* 取消动画效果 */
        background: #35D1E633;
        /* 设置背景颜色为深蓝色 */
        color: #ffffff99;
        /* 设置字体颜色为半透明白色 */
        opacity: 0.5;
        /* 设置不透明度为 0.5 */
        transition: all 0.5s ease-in-out;
        /* 设置过渡效果 */
        }

        .pulse:hover::before,
        .pulse:focus::before,
        .pulse:hover::after,
        .pulse:focus::after {
            animation: none;
            /* 取消动画效果 */
            opacity: 0.5;
            /* 设置不透明度为 0.5 */
            transition: all 0.5s ease-in-out;
            /* 设置过渡效果 */
        }

其他两个效果的实现

由于我们一直都是只有一个背景颜色和阴影颜色。那么其他两个是怎么实现的。
关键来了

filter: hue-rotate(120deg)是CSS中的一种滤镜效果，它可以对元素的色相进行旋转操作。在这个示例中，我们将这个滤镜效果应用到了第二个链接上，让它的颜色变为绿色。

hue-rotate函数接受一个角度值作为参数，表示要对元素的色相进行旋转的角度。这个角度值可以是正值，也可以是负值，表示旋转的方向。在这个示例中，我们设置的角度值为120度，表示将元素的色相向右旋转120度。

除了hue-rotate滤镜效果外，CSS中还有许多其他的滤镜效果，例如brightness、contrast、blur等，可以通过这些滤镜效果来改变元素的颜色、亮度、对比度、模糊度等属性。

filter:grayscale()是CSS中的一种滤镜效果，它可以将元素的颜色转换为灰度。在这个示例中，我们将这个滤镜效果应用到了第三个链接上，让它的颜色变为灰色。

grayscale函数接受一个百分比值作为参数，表示要将元素的颜色转换为灰度的程度。这个百分比值可以是0%到100%之间的任何值，表示转换的程度。在这个示例中，我们没有设置具体的百分比值，而是使用了默认值，将元素的颜色完全转换为灰度。

 <a href="#" class="pulse" style="filter: hue-rotate(120deg);">
        <ion-icon name="radio-outline"></ion-icon>
    </a>
<a href="#" class="pulse" style="filter:grayscale()">
        <ion-icon name="ribbon-outline" ;></ion-icon>
   </a>

源码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 动态发光波纹</title>
    <!-- 引入 ionicons 字体图标库 -->
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <style>
        /* 设置 body 的样式 */
        body {
            height: 100vh;
            margin: 0;
            /* 设置外边距为 0 */
            display: flex;
            /* 设置弹性布局 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            gap: 9rem;
            /* 设置子元素之间的间距 */
            background: #333
                /* 设置背景颜色为黑色 */
        }

        /* 设置链接的样式 */
        .pulse ion-icon {
            font-size: 35px;
            /* 设置字体大小 */
            position: absolute;
            /* 设置绝对定位 */
            padding: 7px;
            /* 设置内边距 */
        }

        /* 设置链接和波纹的样式 */
        .pulse {
            width: 3rem;
            /* 设置链接的宽度 */
            color: #fff;
            /* 设置字体颜色为白色 */
            transition: all .5s ease;
            /* 设置过渡效果 */
            background: #35D1E6;
            /* 设置背景颜色为蓝色 */
        }

        .pulse,
        .pulse::before,
        .pulse::after {
            content: "";
            /* 设置伪元素的内容为空 */
            display: grid;
            /* 设置网格布局 */
            grid-area: 1/1;
            /* 设置元素占据整个网格 */
            aspect-ratio: 1;
            /* 设置宽高比为 1:1 */
            border-radius: 50%;
            /* 设置圆形边框半径 */
            box-shadow: 0 0 0 0 #35D1E633;
            /* 设置波纹的阴影 */
            animation: pulsing 3s linear infinite;
            /* 设置动画效果 */
        }

        /* 鼠标悬停链接时的样式 */
        .pulse:hover,
        .pulse:focus {
        animation: none;
        /* 取消动画效果 */
        background: #35D1E633;
        /* 设置背景颜色为深蓝色 */
        color: #ffffff99;
        /* 设置字体颜色为半透明白色 */
        opacity: 0.5;
        /* 设置不透明度为 0.5 */
        transition: all 0.5s ease-in-out;
        /* 设置过渡效果 */
        }

        .pulse:hover::before,
        .pulse:focus::before,
        .pulse:hover::after,
        .pulse:focus::after {
            animation: none;
            /* 取消动画效果 */
            opacity: 0.5;
            /* 设置不透明度为 0.5 */
            transition: all 0.5s ease-in-out;
            /* 设置过渡效果 */
        }

        /* 设置 pulsing 动画的关键帧 */
        @keyframes pulsing {
            to {
                box-shadow: 0 0 0 6rem #0000;
                /* 设置波纹的阴影效果 */
            }
        }
    </style>
</head>

<body>
    <!-- 创建三个带有波纹效果的链接 -->
    <a href="#" class="pulse">
        <ion-icon name="finger-print-outline"></ion-icon>
    </a>
    <!-- filter: hue-rotate(120deg) 使用滤镜效果 从而阴影也会发生改变--> 
    <a href="#" class="pulse" style="filter: hue-rotate(120deg);">
        <ion-icon name="radio-outline"></ion-icon>
    </a>
    <a href="#" class="pulse" style="filter:grayscale()">
        <ion-icon name="ribbon-outline" ;></ion-icon>
    </a>
</body>

</html>

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END