CSS如何用css做一个爱心

Posted LuckJavaCi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS如何用css做一个爱心相关的知识，希望对你有一定的参考价值。

摘要：html的标签都比较简单，入门非常的迅速，但是CSS是一个需要我们深度挖掘的东西，里面的很多样式属性掌握几个常用的便可以实现很好看的效果，下面我便教大家如何用CSS做一个爱心。

　　前期预备知识：

  1. 　　明白正方形的画法。
  2.       明白圆形的画法。
  3.       明白什么是定位。
  4.       明白怎么旋转。

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

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

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

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

 

　　第三步我们就需要做一个正方形了。

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

　　做完这些的效果已经基本上出来了，但是我们还需要调整一下爱心的角度，这时就需要用到我们css样式中的transform中的rotate属性了。

　　我们由于需要把三个div都旋转角度，所以我们把这三个div放在一个div里面。具体代码如下：

.main{
    transform: rotate(45deg);
    margin: 300px;
}

　　做到现在，我们的爱心就已经做出来咯。效果图如下：

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <link href="css/square.css" rel="stylesheet" type="text/css">
 6         <title></title>
 7     </head>
 8     <body>
 9         <div class="main">
10             <div class="disc1"></div>
11             <div class="disc2"></div>
12             <div class="square"></div>
13         </div>
14     </body>
15 </html>
 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 .main{
 6     transform: rotate(45deg);
 7     margin: 300px;
 8 }
 9 .disc1{
10     width: 100px;
11     height: 100px;
12     border:1px solid red;
13     background-color: red;
14     margin:300px 0px 0px 300px;
15     border-radius:100%;
16     float:left;
17 }
18 .disc2{
19     width: 100px;
20     height: 100px;
21     border:1px solid red;
22     background-color: red;
23     margin:250px 0px 0px 0px;
24     border-radius:100%;
25     float:left;
26     position: relative;
27     right: 50px;
28 }
29 .square{
30     width: 100px;
31     height: 100px;
32     border:1px solid red;
33     background-color: red;
34     margin: 300px 0px 0px 0px;
35     float: left;
36     position: relative;
37     right: 152px;
38 }

　　欢迎大家在评论区留言。

 

以上是关于CSS如何用css做一个爱心的主要内容，如果未能解决你的问题，请参考以下文章

如何用CSS使图片自适应显示宽度

如何用 js 实现 css 透明渐变效果 如:百度首页随心听的歌词效果

如何用html+css做出这个静态网页 求大神解答

如何用css做空心

C语言小程序：如何用代码“画”出一个爱心

如何用css斜切