css 实现心跳

71 阅读 0 评论 47 点赞

我是靠谱客的博主甜美小鸽子，最近开发中收集的这篇文章主要介绍css 实现心跳，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

源代码

效果预览

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

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

```