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;
        }
    }