手把手教你使用css制作一个简单的心跳效果(代码详解)
时间:2021-09-06 来源:互联网
今天PHP爱好者给大家带来如何使用css制作一个简单的心跳效果分享,之前的文章《手把手教你怎么使用css3给文字添加动画效果(附代码)》中,给大家介绍怎么使用css3给文字添加动画效果。下面本篇给大家介绍怎么使用css制作一个简单的心跳效果,我们一起看看怎么做。希望对大家有所帮助。
ccs制作一个简单的心跳效果的方法,添加一个盒子,充分利用ccs展现就可以啦。
1、首先我们在页面添加一个可视化的盒子,创建新一个文档,写代码先用<p class="heart"></p>
这串代码在框架<p>
标签。
代码示例
<body>
<p class="heart"></p>
</body>
Html代码完成。
2、将它先变成一颗心,使用css
设置动画及字体样式,heart属性使用将动画与p元素绑定,下面给大家怎么写代码,使用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;
margin:100px;
animation:scale 1s linear infinite;
/*名称 1s 匀速 无限循环*/
4、最后设置一下动画animation
,这里要说一下animation
必须和@keyframes
一起用,继续用head
标签之间在style
标签中输入绝对定位、宽度、高度、颜色、content
属性、外边框圆角、旋转元素,代码示例
.heart:after,
.heart:before{
position:absolute;
width:70px;
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、我们让它水平垂直两倍缩放
代码示例
@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }
代码效果
效果出来了,有点意思,想变成美的伙伴们可以自己去修改,毕竟审美功力有限,大家审美众口难调,毕竟我也做不到所有人都认可我,我只有努力把作品尽了量的完善。
以上就是手把手教你使用css制作一个简单的心跳效果(代码详解)的详细内容,更多请关注php爱好者其它相关文章!
-
七日世界黑域副本怎么过-黑域副本通关详细 2025-07-25
-
经济现象引发热议,30万存款定律警示膨胀心理与诱惑风险(经济出现过热现象) 2025-07-25
-
Solana 成功轨迹能否复制?加密市场这4款潜力山寨币值得关注 2025-07-25
-
多个山寨币创新高,BTC与ETH的后续走势将何去何从? 2025-07-25
-
PHP中curl_setopt函数详解(基本语法、常用选项、使用示例、应用场景) 2025-07-25
-
蛋仔派对蛋仔碰碰棋怎么玩-蛋仔碰碰棋玩法规则 2025-07-25