【好看的CSS动画分享】跳动的心CSS

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

qq_38192105

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

阅读量453

点赞数 8

文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/qq_38192105/article/details/134953783

版权

前言

纯开发着玩儿的，抱着日积月累的想法，也防止突然要用时还得各种百度思索

效果展示

全部代码（重点是CSS部分）

1、HTML部分

<!-- 绘制心♥ -->
    <div class="heart"></div>

2、CSS部分

<style scoped>
.heart {
    width: 70px;
    height: 70px;
    margin: 200px auto 0;
    background-color: #F20044;
    transform: rotate(45deg);
    position: relative;
    box-shadow: 5px 5px 70px 0 #F20044;
    animation: heart .8s linear infinite;
}

@keyframes heart {
    0% {
        transform: rotate(45deg) scale(1.1);
    }
    75% {
        transform: rotate(45deg) scale(1);
    }
    100% {
        transform: rotate(45deg) scale(0.8);
    }
}

.heart::before {
    position: absolute;
    content: " ";
    width: 70px;
    height: 70px;
    top: -35px;
    left: 0;
    border-radius: 50%;
    background-color: #F20044;
    box-shadow: 0 0 70px 0 #F20044;
}

.heart::after {
    position: absolute;
    content: " ";
    width: 70px;
    height: 70px;
    top: 0;
    left: -35px;
    border-radius: 50%;
    background-color: #F20044;
    box-shadow: 0 0 70px 0 #F20044;
}
</style>