心跳（纯代码制作心形，animation动画）

最新推荐文章于 2023-02-15 21:26:50 发布

weixin_30498921

最新推荐文章于 2023-02-15 21:26:50 发布

阅读量1.3k

点赞数

原文链接：http://www.cnblogs.com/EricZLin/p/8873646.html

版权

思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下：

<body>
    <div></div>
</body>

       div{
            margin: 200px;
            width: 200px;/* 盒子1宽高是2：3 */
            height: 300px;
            background:  rgb(218, 9, 9);
            position: relative;
            border-radius: 100px 100px 0 0;/* 左上，右上变圆角 */
            transform: rotate(-45deg);/* 逆时针旋转45deg放正 */
            animation: heartbeat 1s ease 0s infinite normal;/* 调用heart动画 */
        }
        div::after{
            content: "";
            display: block;
            width: 300px;
            height: 200px;
            background: rgb(218, 9, 9);
            position: absolute;
            bottom: 0;
            left: 0;/* 添加一个盒子，宽高是3:2，然后定位在下面，颜色一样， */
            border-radius: 0 100px 100px 0 ;/* 右上，右下变圆角 */
        }
        @keyframes heartbeat {
            /* 声明一个名称为heart的动画 */
            0%{
                transform: scale(1)  rotate(-45deg);/* 注意，前面使用了旋转，这里必须写上，不然会重叠效果 */
            }
            50%{
                transform: scale(1.2)  rotate(-45deg);
            }
            100%{
                transform: scale(1)  rotate(-45deg);
            }
        }

当然也有其他的方法制作心形，比如：两个圆 + 正方形，可以看另外一篇园友的文章：心跳 CSS

转载于:https://www.cnblogs.com/EricZLin/p/8873646.html

weixin_30498921

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
心跳（纯代码制作心形，animation动画）

思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下：<body> <div></div></body> div{ margin: 200px; width: 200px;/* 盒子1宽高是...
复制链接

扫一扫