HTML爱心动画小玩意儿

最新推荐文章于 2024-01-03 08:00:00 发布

小天呀

最新推荐文章于 2024-01-03 08:00:00 发布

阅读量950

点赞数 4

分类专栏： html 文章标签： html css3 css

本文链接：https://blog.csdn.net/Y_toffee/article/details/108834989

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

哈喽，今天新学了一个HTML技巧，是关于动画的啦，给大家看看成果
是不是很好看呢，背景图片星空那样的还不会，先这样吧

下面是源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心动画</title>
    <style>
        body {
            margin: 0;
            animation: colorChange 6s linear infinite alternate;
        }

        .heart {
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }

        .yue {
            float: left;
            width: 200px;
            height: 200px;
        }

        .left,
        .right {
            float: left;
            width: 100px;
            height: 160px;
            background-color: pink;
            border-radius: 50px 50px 0 0;
        }

        .left {
            transform: translateX(-28px) rotate(45deg);
            /* transform:translateX位移，以x轴为准; */
        }

        .right {
            transform: translateX(30px) rotate(-45deg);
        }

        /* 选择heart下的第二个you 【子元素】*/
        .you:nth-child(2) {
            animation: move 6s linear infinite alternate;
            /* 播放/绑定动画 绑定函数 时间 速度【匀速】 次数【循环【反向】】 */
        }

        .you:nth-child(2) .left,
        .you:nth-child(2) .right {
            animation: colorChange 6s linear infinite alternate;
        }

        @keyframes move {
            0% {
                /* 动画开始的画面 */
                transform: translate(0px);
            }

            100% {
                /* 动画结束的画面 */
                transform: translate(-400px);
            }
        }

        @keyframes colorChange {
            0% {
                background-color: skyblue;
            }

            50% {
                background-color: black;
            }

            100% {
                background-color: skyblue;
            }

        }
    </style>
</head>

<body>
    <div class="heart">
        <div class="you">
            <div class="right"></div>
            <div class="left"></div>
        </div>
        <div class="you">
            <div class="right"></div>
            <div class="left"></div>
        </div>
    </div>
</body>

</html>

小天呀

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML爱心动画小玩意儿

哈喽，今天新学了一个HTML技巧，是关于动画的啦，给大家看看成果下面是源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>爱心动画</title> &lt
复制链接

扫一扫