CSS发光球体

原创于 2024-05-06 22:02:59 发布 · 569 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用CSS创建一个动态效果，通过`.light`类和自定义关键帧`light1`，实现从4px到16px的阴影渐变，展示前端视觉特效的实现方法。

在这里插入图片描述

<div class="light"></div>

.light {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            animation: light 1s ease-in-out infinite alternate;
        }
        @keyframes light {
            from {
                box-shadow: 0px 0px 4px rgb(226, 86, 205);
            }
            to {
                box-shadow: 0px 0px 16px rgb(226, 86, 205);
            }
        }