css动画实现呼吸圆

2024年5月16日 173次阅读 来源: 殷浩

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<title>圆动画</title>
<style>
    .content{
        width: 300px;
        height: 400px;
        background-color: #333;
        margin: 0 auto;
    }
    div{
        box-sizing: border-box;
    }
    .box{
        width: 300px;
        height: 300px;
        padding: 30px;
        animation-name: out;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    .outer{
        /*width: 240px;
        height: 240px;*/
        height: 100%;/*关键所在，只能设置百分比，不能指定数值，内圆相同*/
        border: 2px solid #fff;
        border-radius: 50%;
        padding: 30px;
        animation-name: in;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    .inner{
        /*width: 180px;
        height: 180px;*/
        height: 100%;
        border:5px solid #fff;
        border-radius: 50%;
    }
    @keyframes out{
        25%{
            padding: 20px;
        }
        50%{
            padding: 30px;
        }
    }
    @keyframes in{
        25%{
            padding: 40px;
        }
        50%{
            padding: 30px;
        }
        75%{
            padding: 42px;
        }
        100%{
            padding: 30px;
        }
    }
</style>

</head>
<body>

<div class="content">
    <div class="box">
            <div class="outer">
                <div class="inner"></div>
            </div>
    </div>
</div>

</body>
</html>

    原文作者：殷浩
    原文地址: https://segmentfault.com/a/1190000020007833
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞