登录  /  注册
首页 > web前端 > css教程 > 正文

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

奋力向前
发布: 2021-08-24 14:01:28
原创
2811人浏览过

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

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

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

1、首先我们在页面添加一个可视化的盒子,创建新一个文档,写代码先用<div class="heart"></div>这串代码在框架<div>标签。<p>代码示例</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><div class="contentsignin">登录后复制</div></div><p> Html代码完成。</p><p>2、将它先变成一颗心,使用<code>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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号