520小星星

最新推荐文章于 2024-09-10 16:44:52 发布

正努力改变自己的人

最新推荐文章于 2024-09-10 16:44:52 发布

阅读量77

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_19404693/article/details/124448145

版权

这个html呢，是我在之前上班的时候，暗恋一个女孩子，想跟她表示心意。于是就做了一个这个小东西。虽然最后没有追到。

它的实现原理很简单：将列表横向摆放，通过控制 li 的长度来实现这个效果。
QQ录屏20211128164247.gif

CSS代码

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
body{
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul{
    height: 200px;
    display: flex;
}
li{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: red;
    margin-right: 10px;
}
li:nth-child(1){
    background: red;
    animation: love1 4s 0s infinite;
}
li:nth-child(2){
    background: darkturquoise;
    animation: love2 4s 0.2s infinite;
}
li:nth-child(3){
    background: darksalmon;
    animation: love3 4s 0.4s infinite;
}
li:nth-child(4){
    background: deeppink;
    animation: love4 4s 0.6s infinite;
}
li:nth-child(5){
    background: yellow;
    animation: love5 4s 0.8s infinite;
}
li:nth-child(6){
    background: deeppink;
    animation: love6 4s 1s infinite;
}
li:nth-child(7){
    background: darksalmon;
    animation: love7 4s 1.2s infinite;
}
li:nth-child(8){
    background: darkturquoise;
    animation: love8 4s 1.4s infinite;
}
li:nth-child(9){
    background: red;
    animation: love9 4s 1.6s infinite;
}
@keyframes love1{
    30%,50%{
        height: 60px;
        transform: translateY(-30px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love2{
    30%,50%{
        height: 125px;
        transform: translateY(-60px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love3{
    30%,50%{
        height: 160px;
        transform: translateY(-75px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love4{
    30%,50%{
        height: 180px;
        transform: translateY(-60px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love5{
    30%,50%{
        height: 200px;
        transform: translateY(-35px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love6{
    30%,50%{
        height: 180px;
        transform: translateY(-60px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love7{
    30%,50%{
        height: 160px;
        transform: translateY(-75px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love8{
    30%,50%{
        height: 125px;
        transform: translateY(-60px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}
@keyframes love9{
    30%,50%{
        height: 60px;
        transform: translateY(-30px);
    }
    70%,100%{
        height: 0px;
        transform: translateY(0px);
    }
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loveheart</title>
</head>
<link rel="stylesheet" href="css/heart.css">
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

对于这小东西，只要 li 够多，就可以实现更好看的小心心

正努力改变自己的人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
520小星星

这个html呢，是我在之前上班的时候，暗恋一个女孩子，想跟她表示心意。于是就做了一个这个小东西。虽然最后没有追到。它的实现原理很简单：将列表横向摆放，通过控制 li 的长度来实现这个效果。CSS代码*{ padding: 0; margin: 0;}ul{ list-style: none;}body{ height: 100vh; background: #fff; display: flex; justify-content: ce
复制链接

扫一扫