X73's Blog

一颗跳动的心❤️

  • 2021年 08月31日

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;
  }
}

嗯，就是这样了:wink:

One more thing

啊啦~

因为是初学 html 和 CSS ,

所以还不是很熟练，这个爱心:heart:也是从B站（原视频找不到惹 😂）看到的嗷~

本篇post也仅作为本人学习过程的一个记录哦！

The End.

搜索