之前的 文章 《手把手教你怎么使用css3给文字添加动画效果（附代码）》中，给大家介绍怎么使用css3给文字添加动画效果。下面本篇给大家介绍怎么使用css 制作 一个 简单 的心跳效果，我们一起看看怎么做。
ccs制作一个简单的心跳效果的方法，添加一个 盒子 ，充分 利用 ccs展现就可以啦。
1、首先我们在页面添加一个可视化的盒子，创建新一个文档，写代码先用 <div class="heart"></div> 这串代码在框架 <div> 标签。
代码示例
<body> <div class="heart"></div> </body>
Ht ML 代码完成。
2、将它先变成一颗心，使用 css 设置动画及字体样式，heart属性使用将动画与div元素绑定，下面给大家怎么写代码，使用 head 标签之间加入 <style ty PE "text/css"></style> 这串代码然后在style标签中输入 * 、 li 、 a 文本的边框外部和元素 距离 为 0 、默认值、掉删下划线，代码示例。
*{m arg in:0; padding:0;}
li{list -s tyle:none;}
a{text-decoration:none;}3、接着，使用 head 标签之间加入 heart 这串代码然后在 style 标签中输入文本的相对定位、 宽 度、高度、 外边距 属性可以有 1 到 4 个值、 过渡动画 ，代码示例
*{mar gin :0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
.heart{
pos IT ion:relative;
width:100px;
h ei ght:100px;
margin:100px;
animation:scale 1s linear infinite;
/*名称 1s 匀速 无限循环*/4、最后设置一下动画 animation ，这里要说一下 animation 必须和 @keyfr am es 一起用，继续用 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(-52 deg );
}
.heart:after{
right:0;
transform:rotate(49deg);代码效果
5、我们让它水平垂直两倍缩放
代码示例
@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }代码效果
效果出来了，有点 意思 ，想变成美的伙伴们可以自己去修改，毕竟审美功力有限，大家审美众口难调，毕竟我也做不到 所有人 都认可我，我只有 努力 把作品尽了量的完善。
【完】
推荐学习：CSS3视频教程
以上就是手把手教你使用css制作一个简单的心跳效果（代码详解）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 手把手教你使用css制作一个简单的心跳效果（代码详解） 全部内容，希望文章能够帮你解决 手把手教你使用css制作一个简单的心跳效果（代码详解） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于手把手教你使用css制作一个简单的心跳效果（代码详解）的详细内容...