CSS制作爱心

最新推荐文章于 2024-06-21 09:56:49 发布

花暖啊丶

最新推荐文章于 2024-06-21 09:56:49 发布

阅读量1.9k

点赞数 4

文章标签：爱心

本文链接：https://blog.csdn.net/Franticquanshi/article/details/82730181

版权

一步一步教你用CSS画爱心

在制作爱心之前，首先介绍一下用CSS制作正方形和圆。至于为什么，到制作爱心的时候会告诉大家

一丶话不多说，先教大家怎么用css画一个圆形。

①我们先学一下CSS制作一个正方形的方法。这里我们用一个类选择器

<div class="square"></div>

②通过style标签，在网页上创建嵌入的样式表。

<style>
    .square{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background: red;
        float: left;
        position: relative;
        margin: 200px 0px 0px 0px;
        /* right: 302px; */
    }
</style>

③效果如下图所示：

　二丶画圆形的思路还是一样,我们先得到一个正方形,然后将正方形的4个角做圆角处理就好了.

①先用一个类选择器

<div class="box1"></div>

②我们还是修饰一下这个div的小盒子

<style>
    .box1{
        width: 200px;
        height:200px;
        border: 1px solid red;
        background-color: red;
        border-radius: 100%;
        float: left;
        margin: 200px 0px 0px 200px;

    }
</style>

③效果如下图所示：

三丶由于我们的爱心是由两个圆和一个正方形组成的，所以我们还需要再来一个圆形。

①先用一个类选择器

<div class="box2"></div>

②我们还是修饰一下这个div的小盒子

<style>
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: red;
            border-radius:100%;
            float: left;
            position: relative;
            margin: 100px 0px 0px 0px;
            right: 100px;
        }
</style>

③效果如下图所示：

二丶制作爱心

说了这么多，我们可以制作爱心了吗？答案是肯定的。首先我们看这个爱心.

① 原来我们的爱心就是一个正方形和2个圆(⊙o⊙)…，下面我们就可以根据样式，在最外层添加一个div，去调整自己制作的三个div进行最后的展示：

<div class="red_heart"></div>

②对其方向进行调整

<style>
    .red_heart{
        transform: rotate(45deg);
        padding: 100px;
    }
</style>

③最后效果图如下：

三丶全部代码如下（包含HTML代码和CSS代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red_heart{
            transform: rotate(45deg);
            padding: 100px;
        }
        .box1{
            width: 200px;
            height:200px;
            border: 1px solid red;
            background-color: red;
            border-radius: 100%;
            float: left;
            margin: 200px 0px 0px 200px;

        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: red;
            border-radius:100%;
            float: left;
            position: relative;
            margin: 100px 0px 0px 0px;
            right: 100px;
        }
        .square{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background: red;
        float: left;
        position: relative;
        margin: 200px 0px 0px 0px;
        right: 302px;
    }

   
    </style>
</head>
<body>
    <div class="red_heart">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="square"></div>
    </div>
</body>
</html>