css动画实现呼吸圆

jiezi

5 年前

<!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>