用css代码画一颗会跳的心脏,css 实现心跳

[源代码](https://github.com/coder-syl/cssDemo)

### 效果预览


### 先实现一个正方形，然后旋转实现，实现心的下半部分

```

//预设一个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;

}

}

```

###### 完结撒花

@#