利用CSS写简单爱心

最新推荐文章于 2025-02-25 13:45:39 发布

飞鱼爱吃米

最新推荐文章于 2025-02-25 13:45:39 发布

阅读量2.3k

点赞数

分类专栏：前端基础文章标签： css html 前端

本文链接：https://blog.csdn.net/yolo_link/article/details/118703504

版权

前端基础专栏收录该内容

19 篇文章

订阅专栏

学习CSS三天了，可以利用目前所学的制作一个简单的爱心

仅仅需要三个盒子
一个正方形，两个圆
如下图：
在这里插入图片描述
或许还不是能很清楚的看出来，我把多余的部分消除了，如下：

好了，有了结构，就可以来写代码了
主体部分很简单，就是三个盒子

    <div class="box">
        <div class="yuan1"></div>
        <div class="yuan2"></div>
    </div>

下面就通过css样式来实现我们想要的效果
给这三个盒子设置同样的宽高属性，大盒子里面的小盒子需要边框圆角

<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: indianred;
        margin: 200px auto;
    }
    .box div{
            width: 100px;
            height: 100px;
            background-color: indianred;
            border-radius: 50%;
        }
</style>

做到这一步，实现的效果如下
在这里插入图片描述
此时第一个小圆是在正方形中
所以再给这两个圆添加display属性，转换为行内块，让他们可以在一行显示
但是如果你学了浮动，就更简单，最后再讲
此时转换成行内块还有注意一点：行内块之间有间隙
所以你还要消除行内块的影响
有这几种方法：
1.font-size设置为0px
这种方法仅使用于无文本元素，有文本的话处理比较麻烦，需要把字体大小再设置回来
2.调整margin值
行内块间隙默认4px,自己可以看着调

消除掉行内块的影响后，再把两个圆向上移动高度的一半，第二个圆再向右移动宽度的一半就可以呈现心的效果了
完整代码如下：

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: indianred;
            margin: 200px auto;
            font-size: 0px;
            transform: rotate(-45deg);
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: indianred;
            margin-top: -50px;
            border-radius: 50%;
            display: inline-block;
        }
        .yuan2{
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="yuan1"></div>
        <div class="yuan2"></div>
    </div>
</body>

拓展知识：
代码里有一个属性，初学者可能不知道

transform：rotate（-45deg）;

这是旋转属性，后面会学到，用这里可以让心呈现的更好看

这里说一下用浮动怎么做
让他们左浮动，就可以在一行显示，完整代码如下：

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: indianred;
            margin: 200px auto;
            transform: rotate(-45deg);
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: indianred;
            margin-top: -50px;
            border-radius: 50%;
            float: left;
        }
        .yuan2{
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="yuan1"></div>
        <div class="yuan2"></div>
    </div>
</body>