心跳动画---纯css实现

最新推荐文章于 2025-07-18 12:31:34 发布

原创最新推荐文章于 2025-07-18 12:31:34 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端动画

前端日常笔记专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现的心形动画效果。通过精心设置CSS属性，如动画、阴影和旋转等，来呈现一个动态变化的心形图案。此教程适合前端开发者学习CSS动画制作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
            * {
                margin: 0;
                padding: 0;
            }

            .heart {
                -webkit-animation: heartbeat 1s infinite;
                -webkit-animation: heartbeat 1s infinite;
                /* Safari 和 Chrome */
                width: 198px;
                height: 198px;
                background: #f00;
                position: relative;
                -webkit-filter: drop-shadow(0px 0px 20px rgb(255, 20, 20));
                -webkit-transform: rotate(45deg);
                left: 200px;
                top: 200px;
            }

            .heart:before,
            .heart:after {
                content: "";
                position: absolute;
                width: 200px;
                height: 200px;
                background: #f00;
                border-radius: 100px;
            }

            .heart:before {
                left: -100px;
            }

            .heart:after {
                left: 0;
                top: -100px;
            }

            @-webkit-keyframes heartbeat {
                0% {
                    -webkit-transform: rotate(45deg) scale(0.8, 0.8);
                    opacity: 1;
                }
                25% {
                    -webkit-transform: rotate(45deg) scale(1, 1);
                    opacity: 0.8;
                }
                100% {
                    -webkit-transform: rotate(45deg) scale(0.8, 0.8);
                    opacity: 1;
                }
            }
    </style>