技術標籤：javascripthtml

//css

.box{
            width:200px;
            height:200px;
            margin:50px auto;
            animation:size 1s infinite;
            animation-direction:alternate;
            transition:1s all;
        }
        .round1{
            width:100px;
            height:100px;
            border-radius:50%;
            background-color:red;
            float:left;
            position:absolute;
        }
        .round2{
            width:100px;
            height:100px;
            border-radius:50%;
            background-color:red;
            float:left;
            position:absolute;
            margin-left:80px;
        }
        .rec{
            width:100px;
            height:100px;
            background-color:red;
            float:left;
            position:absolute;
            margin-top:40px;
            margin-left:40px;
            transform:rotateZ(45deg);
        }
        @keyframes size{
            0%{
                transform:scale(0.6);
            }
            100%{
                transform:scale(1);
            }
        }


//html:

<div class="box">
    <div class="round1"></div>
    <div class="round2"></div>
    <div class="rec"></div>
</div>
 

效果圖：