css動畫屬性實現心臟跳動的小demo效果
阿新 • • 發佈：2019-01-22
前言
今天總結了很多css動畫屬性相關知識，就把前幾天做的動畫屬性做的小demo，順帶總結到我的CSDN中，便於自己對於知識的加深。直戳要點了：實現思路
1.文件結構，使用偽元素建立兩個小模組，使其在父元素兩邊。 2.border-radius屬性設定心型兩個圓角效果 3.使用transform-origin將連個偽元素建立塊，有著相同的旋轉點。 效果圖如下：
實現demo程式碼如下：
<!DOCTYPE html> <html> <head> <title>心型照片</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ width:200px; height: 160px; margin:200px auto; } .wrap p{ width:200px; height: 160px; position: relative; animation: drop 4s infinite; background-color: transparent; /*test color*/ } @keyframes drop{ 0%{ transform:scale(1); } 50%{ transform:scale(2); } to{ transform: scale(1); } } .wrap p:before{ content: ''; position: absolute; left:0; top:0; width:100px; height: 160px; border-radius:100px 100px 0 0; transform:rotate(45deg); transform-origin: right bottom; background-color: red; } .wrap p:after{ content: ''; position: absolute; right: 0; top:0; width: 100px; height: 160px; border-radius:100px 100px 0 0; background-color: red; transform:rotate(-45deg); transform-origin:left bottom; } </style> </head> <body> <div class="wrap"> <p></p> </div> </body> </html>