CSS動畫實作心跳效果
- 簡介
-
- 實作步驟
- 代碼
- 效果
簡介
使用CSS動畫animation 和tranform（縮放、旋轉）。
實作步驟
- 添加p元素内容之前/之後插入，一個寬為100px,高為160px的效果。
- 分别給增加左上角，右上角圓角效果
- 對插入元素前元素，進行**（旋轉原點為右下角，進行順時針旋轉45度）**。
- 對插入元素後元素進行**（旋轉原點為左下角，進行逆時針旋轉45度）**，
- 兩個效果旋轉後效果疊加，形成一個心型。
- 然後通過添加放大1倍的動畫，實作心跳效果。
代碼
<!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;/*drop-動畫名 4s-動畫周期 infinite: 動畫播放次數：永遠*/
background-color: transparent; /*test color*/
}
@keyframes drop{ /*原圖，放大一倍，再恢複到原圖 */
0%{
transform:scale(1); /*transform：2D、3D轉換,旋轉、縮放、移動、傾斜*/
}
50%{
transform:scale(2);/*擴大到4倍*/
}
to{
transform: scale(1);
}
}
.wrap p:before{ /*在某元素的内容之前插入新内容： 右下角為旋轉原點，旋轉45度*/
content: '';
position: absolute;
left:0;
top:0;
width:100px;
height: 160px;
border-radius:100px 100px 0 0;/*添加圓角邊框，左上角 右上角 右下角 左下角（順時針）*/
transform:rotate(45deg); /*2D旋轉 45度*/
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>
效果
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)