（不是代码员也可以弄）使用网页520给女神表白：使用html+css动态心型

最新推荐文章于 2023-03-08 14:53:31 发布

Cvv_菜包

最新推荐文章于 2023-03-08 14:53:31 发布

阅读量631

点赞数 1

本文链接：https://blog.csdn.net/weixin_44768879/article/details/106226001

版权

废话不多说！给小白一个福利

1.先在桌面创建一个文本文件
在这里插入图片描述
2.打开，并复制一下的代码进文本，且保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>送个你</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,ol{
        list-style: none;
    }
    body{
        height: 100vh;
        background: #000000;
        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: 20px;
    }
    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: love4 4s 1s infinite;
    }
    li:nth-child(7){
        background: darksalmon;
        animation: love3 4s 1.2s infinite;
    }
    li:nth-child(8){
        background: darkturquoise;
        animation: love2 4s 1.4s infinite;
    }
    li:nth-child(9){
        background: red;
        animation: love1 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(-45px);
        }
        70%,100%{
            height: 0px;
            transform: translateY(0px);
        }
    }


    h1{
        color: white;
        margin-top: 500px;

    }


</style>
<body οnmοusedοwn="change()">

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<br>
<h1 id="ioy"></h1>

<script>
    var ioy=document.getElementById("ioy")
    function change() {
        ioy.innerHTML="I LOVE YOU! YOU ARE MY LIFE!";

    }
</script>

</body>
</html>

3.然后吧这个文本文件的后缀改为html
在这里插入图片描述
会弹出这个，按确定：

4.这样就大功告成了，直接点击打开就可以了

可以动手做一做窝！！！

Cvv_菜包

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
（不是代码员也可以弄）使用网页520给女神表白：使用html+css动态心型

废话不多说！给小白一个福利1.先在桌面创建一个文本文件2.打开，并复制一下的代码进文本，且保存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>送个你</title></head><style> *{ margin: 0; padding: 0; }
复制链接

扫一扫