css3 實作心跳

​ 源代碼

效果預覽

先實作一個正方形，然後旋轉實作，實作心的下半部分

//預設一個div
<div class="heart">
    </div>      

.heart {
        //這裡模拟心跳的動畫，後面會寫
        animation: beat 1s infinite;
        -webkit-animation: beat 1s infinite;
        //寬為200px
        width: 200px;
        //高為200px
        height: 200px;
        //背景顔色
        background-color: #f00;
        // 添加陰影
        filter:drop-shadow(0px 0px 20px rgb(255,20,20));
        //選裝45度制作心尖
        transform: rotate(45deg);
        // 往下往左各移動200px
        position: relative;
        top: 200px;
        left: 200px;
    }      

在正方形上加圓，實作心

//使用::before和::after
   .heart::before,
    .heart::after {
    
        content: "";
        //與正方行為參照。必須寫。具體的位置，分開寫，見下。
        position: absolute;
        //寬和高都為200px;保證和正方型重疊的部分大小一緻。
        width: 200px;
        height: 200px;
        //設定弧度為100px，實作圓
        border-radius: 100px;
        background-color: #f00;

    }
// 設定位置
    .heart:before {
        left: -100px;
    }
// 設定位置
    .heart::after {
        left: 0px;
        top: -100px;
    }      

添加動畫

@keyframes beat {
        0% {
        //注意這裡一定要加上rotate(45deg)，不加的話，會預設不旋轉
            transform: rotate(45deg) scale(0.8, 0.8);
            // 設定透明度
            opacity: 1;
        }

        25% {
            transform: rotate(45deg) scale(1, 1);
            opacity: 0.8;
        }

        100% {
            transform: rotate(45deg) scale(0.8, 0.8);
            opacity: 1;
        }
    }