tips:这是一个用来练习的小项目
先看看成品吧
Heartbeat (👈点这里前往查看！)
是不是很有意思呢？
其实做法也很简单，只需要用到“一点” CSS 就可以完成了！
来看看源代码吧
Html
<div class="heart">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
真的 很简单 对吧？
只用到了 9 个 <span> ，因为
这个爱心是由 9 条杠组成的鸭（好傻
CSS
下面，重磅展示 CSS 部分！！！
锵锵锵~ （太中二了😅
body{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center,navy,black);
}
.heart{
width: 14em;
height: 11em;
font-size: 25px;
display: flex;
justify-content: space-between;
}
.heart span{
--c:lightblue;
--h:50%;
--t:25%;
width: 1em;
background-color:var(--c);
border-radius: 0.5em;
position: relative;
height: var(--h);
top: var(--t);
animation: beating 5s infinite;
}
.heart span:nth-child(1),
.heart span:nth-child(9){
--c:orangered;
--h:3em;
--t:2.2em;
}
.heart span:nth-child(2),
.heart span:nth-child(8){
--c:gold;
--h:6em;
--t:0.6em;
}
.heart span:nth-child(3),
.heart span:nth-child(7){
--c:limegreen;
--h:8em;
--t:0;
}
.heart span:nth-child(4),
.heart span:nth-child(6){
--c:dodgerblue;
--h:9em;
--t:0.8em;
}
.heart span:nth-child(5){
--c:mediumpurple;
--h:9.4em;
--t:1.6em;
}
@keyframes beating {
0%,30%,100%{
height: var(--h);
top: var(--t);
background-color:var(--c);
filter: blur(0);
width: 1em;
}
60%,70%{
height: 50%;
top: 25%;
background-color:lightblue;
filter: blur(5px);
width: 0.1em;
}
}
嗯，就是这样了
One more thing
啊啦~
因为是初学 html 和 CSS ,
所以还不是很熟练，这个爱心
也是从B站（原视频找不到惹 😂）看到的嗷~
本篇post也仅作为本人学习过程的一个记录哦！