CSS 跳动爱心——情人节

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

丶极致

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

阅读量1.5k

点赞数 7

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_42758330/article/details/122876031

版权

马上又到情人节了，今天用HTML+CSS写一个跳动爱心的小网页，超级简单，可以根据自己的需求改动。快来看看吧！

首先html部分代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>I love you</title>    
</head>

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

</html>

css部分代码：

        body {
            margin: 0;
            background-color: black;
        }
        
        .heart {
            width: 200px;
            height: 200px;
            /*auto 左右自动相等 */
            margin: 100px auto;
            background-color: black;
            /* 播放动画 动画名称 时间 匀速 无限播放 反向 */
            animation: beat 1s linear infinite alternate;
        }
        /* 关键帧 */
        
        @keyframes beat {
            /* 开始画面 */
            0% {
                transform: scale(1);
            }
            /* 结束画面 */
            100% {
                transform: scale(1.1);
            }
        }
        
        .left,
        .right {
            width: 100px;
            height: 160px;
            float: left;
            background-color: pink;
            /* 圆角 顺时针 左上 右上 右下 左下  半径 */
            border-radius: 50px 50px 0 0;
            /* 盒子阴影 水平方向 垂直方向 模糊半径 扩展  颜色 */
            box-shadow: 0px 0px 20px 0px pink;
        }
        
        .left {
            /* 变换 移动 旋转 */
            transform: translateX(29px) rotate(-45deg);
        }
        
        .right {
            transform: translateX(-29px) rotate(45deg);
        }

丶极致

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 跳动爱心——情人节

马上又到情人节了，今天用HTML+CSS写一个跳动爱心的小网页，超级简单，可以根据自己的需求改动。快来看看吧！首先html部分代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>I love you</title> </head><body> <div class="h
复制链接

扫一扫