HTML+CSS心动效果

最新推荐文章于 2024-04-15 06:15:00 发布

橙臣程

最新推荐文章于 2024-04-15 06:15:00 发布

阅读量200

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_64560999/article/details/126421749

版权

本文介绍了如何使用CSS创建一个动态的心形动画。通过结合HTML和CSS，利用一个正方形和两个圆形的重叠旋转，形成一个逼真的心跳效果。动画关键帧(@keyframes)用于控制心形在不同阶段的缩放和旋转，从而实现心动的感觉。背景色为深绿色，心形颜色为红色，整体效果在浏览器中呈现。

摘要由CSDN通过智能技术生成

css心动案例——源自b战

原视频

实现效果

2022-08-19-11-33-20

HTML

<body>
    <div class="heart"></div>
</body>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    background: rgb(20, 69, 69);
}

.heart {
    width: 200px;
    height: 200px;
    background: red;
    margin: 200px auto;
    transform: rotate(45deg) scale(0.5);
    animation-name: dh;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.heart::before {
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    background: red;
    transform: translateX(-100px);
}

.heart::after {
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    background: red;
    transform: translateY(-100px);
}

@keyframes dh {
    25% {
        transform: rotate(45deg) scale(1);

    }

    50% {
        transform: rotate(45deg) scale(0.5);
    }

    75% {
        transform: rotate(45deg) scale(1);
    }

    to {
        transform: rotate(45deg) scale(0.5);
    }
}