39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

原文地址：https://segmentfault.com/a/1190000015126240

HTML code:

<div class="heart">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS code:

body {
    margin: 0;
    padding: 0;
    /* vh就是当前屏幕可见高度的1%，也就是说
       height:100vh == height:100%;
       但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
       但是设置height:100vh，该元素会被撑开屏幕高度一致。
    */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, navy, black);
}
.heart{
  font-size: 20px;
  width: 16em;
  height: 11em;
  display: flex;
  justify-content: space-between;
}
.heart span {
    --c: lightblue;
    --h: 50%;
    --t: 25%;
    width: 1em;
    height: var(--h);
    position: relative;
    top: var(--t);
    border-radius: 0.5em;
    background-color: var(--c);
    animation: beating 5s infinite;
}
@keyframes beating{
    0%, 30% {
        top: var(--t);
        height: var(--h);
        background-color: var(--c);
        filter: blur(0);
        width: 1em;
    }
    60%, 70% {
        height: 50%;
        top: 25%;
        background-color: lightblue;
        filter: blur(5px);
        width: 0.1em;
    }
}
/* 配色 */
.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;
}