css3动画之跳动的小心心

最新推荐文章于 2024-10-31 22:16:12 发布

小仓桑

最新推荐文章于 2024-10-31 22:16:12 发布

阅读量172

点赞数

分类专栏： CSS动画文章标签： css3 css html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43462019/article/details/128605951

版权

CSS动画专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html代码

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

css代码

.hearts{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
.heart{
    width: 200px;
    height: 200px;
    background: #e74c3c;
    transform: rotate(45deg);
    position: relative;
    animation-name: heart;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.heart::before {
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #e74c3c;
    position: absolute;
    transform: translate(-50%, 0px);
}

.heart::after {
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #e74c3c;
    position: absolute;
    transform: translate(0%, -50%);
}

@keyframes heart {
    from {
        transform: scale(.3) rotate(45deg);
    }

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