手把手教你使用css制作一个简单的心跳效果（代码详解）

之前的文章《手把手教你怎么使用css3给文字添加动画效果（附代码）》中，给大家介绍怎么使用css3给文字添加动画效果。下面本篇给大家介绍怎么使用css制作一个简单的心跳效果，我们一起看看怎么做。

ccs制作一个简单的心跳效果的方法，添加一个盒子，充分利用ccs展现就可以啦。

1、首先我们在页面添加一个可视化的盒子，创建新一个文档，写代码先用div class="heart"> /div> 这串代码在框架div> 标签。

代码示例

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

HtML代码完成。

2、将它先变成一颗心，使用css设置动画及字体样式，heart属性使用将动画与div元素绑定，下面给大家怎么写代码，使用head标签之间加入style tyPE"text/css"> /style> 这串代码然后在style标签中输入*、li、a文本的边框外部和元素距离为0、默认值、掉删下划线，代码示例。

*{
    margin:0;
     padding:0;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
}
    

3、接着，使用head标签之间加入heart这串代码然后在style标签中输入文本的相对定位、宽度、高度、外边距属性可以有1到4个值、过渡动画，代码示例

*{
    margin:0;
     padding:0;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
}
 .heart{
    posITion:relative;
    width:100px;
     height:100px;
    margin:100px;
    animation:scale 1s linear infinite;
      /*名称 1s 匀速 无限循环*/

4、最后设置一下动画animation，这里要说一下animation必须和@keyframes一起用，继续用head标签之间在style标签中输入绝对定位、宽度、高度、颜色、content属性、外边框圆角、旋转元素，代码示例

.heart:after,.heart:before{
    position:absolute;
    width:70px;
    height:100%;
    background-color:red;
    content:"";
    border-radius:50% 50% 0 0;
}
.heart:before{
    left:0;
    transform:rotate(-52deg);
}
.heart:after{
    right:0;
    transform:rotate(49deg);
    

代码效果

@H_360_76@

5、我们让它水平垂直两倍缩放

代码示例

@keyframes scale{
 /*动画帧*/ 50%{
transform:scale(2)}
 }
    

代码效果

效果出来了，有点意思，想变成美的伙伴们可以自己去修改，毕竟审美功力有限，大家审美众口难调，毕竟我也做不到所有人都认可我，我只有努力把作品尽了量的完善。

【完】

推荐学习：CSS3视频教程

以上就是手把手教你使用css制作一个简单的心跳效果（代码详解）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！