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

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

手把手教你使用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标签中输入*lia文本的边框外部和元素距离为0、默认值、掉删下划线,代码示例。

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

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

*{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);

代码效果

GIF.gif

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

代码示例

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

代码效果

GIF.gif

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

【完】

推荐学习:CSS3视频教程

以上就是手把手教你使用css制作一个简单的心跳效果(代码详解)的详细内容,更多请关注php中文网其它相关文章!

原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/146498.html

(0)
上一篇 2021年9月8日
下一篇 2021年9月8日

相关推荐

发表回复

登录后才能评论