CSS (border-radius应用) 笔记 08

最新推荐文章于 2024-10-03 20:14:40 发布

不修×蝙蝠

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量336

点赞数 6

文章标签：前端 css html 笔记动画

本文链接：https://blog.csdn.net/m0_74977981/article/details/141646051

版权

border-radius: n1 n2 n3 n4 / a1 a2 a3 a4

【n1-a1，n2-a2，n3-a3，n4-a4 分别表示上右下左顺序边角的椭圆边角，其中n代表水平，a代表垂直】

e.g 有趣的小水滴动画（应用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #00a8df;
        }

        div {
            position: relative;
            width:100px;
            height:100px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5), 
            -8px -9px 8px rgba(255,255,255,0.4) inset,
            -4px -8px 10px rgba(255,255,255,0.6) inset,
            -2px -4px 5px rgba(255,255,255,0.4) inset;
            border-radius: 45% 55% 40% 60% / 50% 32% 68% 50%   ;
            animation: aaa 3s ease infinite alternate; /* 设置阴影（外内均设置） */
        }

        div::after{
            position: absolute;/* 设置内部小气泡 */
            left:30px;
            top:30px;
            content:"";
            display: block;
            opacity: 0.8;
            width:10px;
            height:10px;
            background: #aaa;
            border-radius: 100px;
            box-shadow:  5px 5px 10px rgba(0,0,0,0.5), 
            -8px -9px 8px rgba(255,255,255,0.4) inset,
            -4px -8px 10px rgba(255,255,255,0.6) inset,
            -2px -4px 5px rgba(255,255,255,0.4) inset; 
        }
        div::before{
            position: absolute;
            left:35px;
            top:10px;
            content:"";
            display: block;
            width:5px;
            height:5px;
            opacity: 0.6;
            background: #aaa;
            border-radius: 100px;
            box-shadow:  5px 5px 10px rgba(0,0,0,0.5), 
            -8px -9px 8px rgba(255,255,255,0.4) inset,
            -4px -8px 10px rgba(255,255,255,0.6) inset,
            -2px -4px 5px rgba(255,255,255,0.4) inset; ;
        }

        @keyframes  aaa{ /* 设置动画变动效果 */
            20%{
                border-radius:52% 48% 49% 51% / 42% 39% 61% 58%  ;
            }
            50%{
                border-radius:61% 39% 59% 41% / 35% 47% 53% 65%  ; 
            }

            80%{
                border-radius:67% 33% 70% 30% / 29% 57% 43% 71%  ;
            }
        }
    </style>

</head>
<body>
<div></div>
</body>
</html>

得到一个翻涌的动态小水滴：