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

最新推荐文章于 2024-05-16 01:31:40 发布

南沨.

最新推荐文章于 2024-05-16 01:31:40 发布

阅读量1.6k

点赞数 5

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_62816172/article/details/121592448

版权

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

觉得可以的多多点赞支持哦

这是效果图

下面直接上代码部分

HTML部分

<!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部分

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

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

有参考抖音博主艾恩小灰灰

南沨.

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
只用html+css做出会跳动爱心

制作十分简单，用到css的动画，有比较难的部分都做了注释觉得可以的多多点赞支持哦这是效果图下面直接上代码部分HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name...
复制链接

扫一扫