ccs制作一个简单的心跳效果的方法，添加一个盒子，充分利用ccs展现就可以啦。
1、首先我们在页面添加一个可视化的盒子，创建新一个文档，写代码先用<div class="heart"></div>这串代码在框架<div>标签。
代码示例
复制代码1
2
3
<body>
<div class="heart"></div>
</body>
登录后复制Html代码完成。
2、将它先变成一颗心，使用css设置动画及字体样式，heart属性使用将动画与div元素绑定，下面给大家怎么写代码，使用head标签之间加入<style type"text/css"></style>这串代码然后在style标签中输入*、li、a文本的边框外部和元素距离为0、默认值、掉删下划线，代码示例。
复制代码1
2
3
*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
登录后复制3、接着，使用head标签之间加入heart这串代码然后在style标签中输入文本的相对定位、宽度、高度、外边距属性可以有1到4个值、过渡动画，代码示例
复制代码1
2
3
4
5
6
7
8
9
10
11
*{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属性、外边框圆角、旋转元素，代码示例
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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);
登录后复制代码效果
5、我们让它水平垂直两倍缩放
代码示例
复制代码1
@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }
登录后复制代码效果
效果出来了，有点意思，想变成美的伙伴们可以自己去修改，毕竟审美功力有限，大家审美众口难调，毕竟我也做不到所有人都认可我，我只有努力把作品尽了量的完善。
【完】
推荐学习：CSS3视频教程
以上就是手把手教你使用css制作一个简单的心跳效果（代码详解）的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是安详老鼠最近收集整理的关于手把手教你使用css制作一个简单的心跳效果（代码详解）的全部内容，更多相关手把手教你使用css制作一个简单内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复