只用html+css做出会跳动爱心

今天分享一个HTML动画的小技巧，完全用CSS来画一个会动的爱心。动画效用的就是CSS的动画属性，但是爱心图案并不是图片，而是用CSS拼出来的，这个小技巧还是有令人眼前一亮的感觉。

制作，用到css的动画，有比较难的部分都做了注释

先来看一下最终的动态效果图是怎么样的：

下面是代码部分

HTML部分

首先在body中建“heart”类，在heart里添加span标签，使用外链CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩爱心</title>
    <!-- 外链css文件 css代码在后面 -->
    <link rel="stylesheet" href="aixin.css">
</head>
<body>
    <div class="heart">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

css部分

友情提示复制记得外联！！！

2.在body里设置图形页面的窗口高度，加上渐变，使用justify-content: center居中对齐。

body{
    margin:0;
    /* 图形在页面窗口的高度 */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 渐变背景图 */
    background:radial-gradient(circle at center,#937bda,#000) ;
}

3.给heart部分增加边框和宽高，在设置display:flex,justify-content: space-betweend的时候，它会把子元素靠边对齐平均分剩余的空间。

.heart{
    width: 280px;
    height: 220px;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
}

4.给span标签添加边框圆角，加上背景颜色、宽度和高度，用相对定位。然后加上动画效果，播放时间间隔1s，无限次播放。

.heart span{
    /* 函数方法多次调用的时候好用 */
    --c:plum;
    --h:50%;
    --t:25%;
    background-color: var(--c);
    width: 20px;
    /* 边框圆角 */
    border-radius: 10px;
    position: relative;
    height: var(--h);
    top: var(--t);
    /*  播放间隔1s   无限次播放   infinite */
    animation: beating 1s infinite;
}

5.使用后代选择器，选择需要设置的span标签，修改每个标签里需要的属性，以达到需要的效果，代码如下：

/* 后代选择器   第一个span和第九个*/
.heart span:nth-child(1),
.heart span:nth-child(9){
  --c:lightcoral;
  --h:80px;
  --t:20px;
}
.heart span:nth-child(2),
.heart span:nth-child(8){
    --c:lightskyblue;
  --h:120px;
  --t:12x;
}
.heart span:nth-child(3),
.heart span:nth-child(7){
    --c:lightgreen;
  --h:160px;
  --t:0px;
}
.heart span:nth-child(4),
.heart span:nth-child(6){
    --c:gold;
  --h:180px;
  --t:16px;
}
.heart span:nth-child(5){
    --c:plum;
    --h:180px;
    --t:32px;
}

给设置完的标签添加动画，0%、30%，60%、70%两个部分，分别设置不同的参数，代码如下图：

@keyframes beating{
    0%,30%{
        height: var(--h);
        top: var(--t);
        background-color: var(--c);
        filter: blur(0);
    }
    60%,70%{
        height: 50%;
        top: 25%;
        background-color: plum;
        /* 模糊 */
        filter: blur(5px);
    }

以下是完整的CSS代码

body{
    margin:0;
    /* 图形在页面窗口的高度 */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 渐变背景图 */
    background:radial-gradient(circle at center,#937bda,#000) ;
}
.heart{
    width: 280px;
    height: 220px;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
}
.heart span{
    /* 函数方法多次调用的时候好用 */
    --c:plum;
    --h:50%;
    --t:25%;
    background-color: var(--c);
    width: 20px;
    /* 边框圆角 */
    border-radius: 10px;
    position: relative;
    height: var(--h);
    top: var(--t);
    /*  播放间隔1s   无限次播放   infinite */
    animation: beating 1s infinite;
}
/* 后代选择器   第一个span和第九个*/
.heart span:nth-child(1),
.heart span:nth-child(9){
  --c:lightcoral;
  --h:80px;
  --t:20px;
}
.heart span:nth-child(2),
.heart span:nth-child(8){
    --c:lightskyblue;
  --h:120px;
  --t:12x;
}
.heart span:nth-child(3),
.heart span:nth-child(7){
    --c:lightgreen;
  --h:160px;
  --t:0px;
}
.heart span:nth-child(4),
.heart span:nth-child(6){
    --c:gold;
  --h:180px;
  --t:16px;
}
.heart span:nth-child(5){
    --c:plum;
    --h:180px;
    --t:32px;
}
@keyframes beating{
    0%,30%{
        height: var(--h);
        top: var(--t);
        background-color: var(--c);
        filter: blur(0);
    }
    60%,70%{
        height: 50%;
        top: 25%;
        background-color: plum;
        /* 模糊 */
        filter: blur(5px);
    }
}

上面的代码可以实现一个动态的爱心，不过动态效果并不是无限次重复动的，当打开网页后，爱心大小会收缩和放大，上面呢就是这个动态效果的代码展示以及画面展示。代码很简单，但是效果却挺好看的。可以发给自己喜欢的人看看。

标签： html css 前端

本文转载自: https://blog.csdn.net/m0_65627447/article/details/127459207
版权归原作者 sdallw 所有，如有侵权，请联系我们删除。