Hi,为确保您的账号安全,请大家修改登陆密码为包含大小写字母、标点、数字的复合密码,不要使用过于简单的登陆密码。
您当前的位置:首页 :: CSS

用DIV+CSS实现跳动的心

时间:2019-05-10 14:39:56  来源:精灵网  作者:jorsh

用DIV+CSS实现跳动的心

先上一张效果图

 c0a0c9c355fe8e4c636a5024b41fecbb.gif

 

HTML代码:

<div class="beatingheart">
    <div></div>
</div>

CSS 如下:

.beatingheart{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #FFF;
    display: flex;
    align-items: center;
}
.beatingheart div{
    width: 36px;
    height: 36px;
    background: red;
    margin: 0 auto;
    position: relative;
    -webkit-animation:beatingheart 1s linear infinite;
    animation:beatingheart 1s linear infinite;
}
.beatingheart div:before{
    width: 36px;
    height: 36px;
    background: red;
    margin: 0 auto;
    content: ' ';
    position: absolute;
    border-radius: 50% 50% 0 50%;
    left: -20px;
}
.beatingheart div:after{
    width: 36px;
    height: 36px;
    background: red;
    margin: 0 auto;
    content: ' ';
    position: absolute;
    border-radius: 50% 50% 0 50%;
    top:-20px;
}
@keyframes beatingheart{
    from {transform:scale(1.1) rotate(45deg);}
    to {transform:scale(1) rotate(45deg);}
}

 

 

 

举报
收藏0次 / 评论0
评论(0)
还可以输入 2000 个字符
还可以输入 2000 个字符
取消回复
举报×

还可以输入 264 字符

收藏(0)×