CSS实现两个球相交的粘粘效果

最新推荐文章于 2023-03-30 22:25:47 发布

丨疯小孩丨

最新推荐文章于 2023-03-30 22:25:47 发布

阅读量483

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现效果

这个效果就是外层添加对比度，小球添加高斯模糊，形成的效果。

实现的代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .effect {
            width: 360px;
            height: 100%;
            padding-top: 50px;
            /* 调整对比度 */
            filter: contrast(10);
            background: #fff;
            margin: auto;
        }

        .blackball {
            width: 100px;
            height: 100px;
            background: black;
            padding: 10px;
            border-radius: 50%;
            margin: 0 auto;
            z-index: 1;
            /* 高斯模糊 */
            filter: blur(5px);
        }

        .redball {
            width: 60px;
            height: 60px;
            background: #f00;
            padding: 10px;
            border-radius: 50%;
            position: absolute;
            top: 70px;
            left: 50px;
            z-index: 2;
            /* 高斯模糊 */
            filter: blur(5px);
            animation: rball 6s infinite;
        }

        /* 运动轨迹动画 压缩 */
        @keyframes rball {

            0%,
            100% {
                left: 30px;
                width: 60px;
                height: 60px;
            }

            4%,
            54% {
                width: 60px;
                height: 60px;
            }

            10%,
            60% {
                width: 50px;
                height: 70px;
            }

            20%,
            70% {
                width: 60px;
                height: 60px;
            }

            34%,
            90% {
                width: 70px;
                height: 50px;
            }

            41% {
                width: 60px;
                height: 60px;
            }

            50% {
                left: calc(100% - 95px);
                width: 60px;
                height: 60px;
            }
        }
    </style>
</head>

<body>
    <div class="effect">
        <div class="blackball"></div>
        <div class="redball"></div>
    </div>
</body>

</html>

看了这篇文章写出来的出处

丨疯小孩丨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现两个球相交的粘粘效果

实现效果这个效果就是外层添加对比度，小球添加高斯模糊，形成的效果。实现的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
复制链接

扫一扫