一步一步教你用CSS画爱心

CSS有很多小魔法，今天就介绍一种画爱心的方法(是纯CSS画的哦)。网上有很多教程，但这个画法是本人原创哦~

———————————来自北极熊猫的分割线———————————————

1、画爱心之前，首先介绍一下用CSS画正方形、三角形、还有圆。至于为什么，到画爱心的时候会告诉大家。

正方形

Ø 我们先学一下CSS画一个正方形的画法。

这里我们用一个类选择器

Ø 然后我们修饰一下这个<div class="c1"></div>的小盒子

div.c1{

width:0px;height:0px;

border:100px solid red;

}

然后我们看一下效果。

这样我们就得到了一个正方形（注意这个正方形的边长是200px哦）。

为什么是边长是200px呢,其实你看代码应该就能看出来了。<div>你就把它想象成一个盒子,他有内边框和外边框。

Border指的是内边框和外边框的宽度,width、height指的是盒子中间的部分的宽和高。

上面的代码意识是说:我要画一个盒子,它里面的内容宽和高度都为0，内边框到外边框的宽度为100px，这个我们就得到了一个200px*200px的一个实心的正方形。注意这里的width和height一定要为0，不然中间就会出来一个白色的小白块。

☛画正方形的完整代码如下：

<!DOCTYPE html>

<html>

<head>

<title>正方形_Square</title>

<style>

div.c1{

width:0px;height:0px;

border:100px solid red;

}

</style>

</head>

<body>

</body>

</html>

直角三角形

其实我们一看这个直角三角不正好是半个正方形么,我们只要把一个完整的正方形的一半不就好了么。

思路有了,我们就开始写代码了,不过再这之前我们先画一个不一样的正方形。

还是一样我们先弄一个正方形再说:

Ø 先用一个类选择器

Ø 我们还是修饰一下这个<div class="c1"></div>的小盒子

div.c1{

width:0px;height:0px;

border:100px solid red;

}

这样我们就得到了一个正方形.

Ø 我们在修饰一下,在加一句:

border-color:red blue purple yellow;

这句代码的意思是我要修饰正方形的4条边的颜色,分辨是:red blue purple yellow.

效果如下:

注意修饰的顺序是:上→右→下→左.

那能把上面和右边的2块隐藏掉多少.

那我们改一下刚才那句代码:border-color:transparent transparent red red;

(Transparent是隐藏的意思)

修改好效果如下:

刚好是我们想要的一个三角形.

☛画直角三角形完整代码如下:

<!DOCTYPE html>

<html>

<head>

<title>三角形_triangle</title>

<style>

div.c1{

width:0px;height:0px;

border: 100px solid red;

border-color:transparent transparent red red;

}

</style>

</head>

<body>

</body>

</html>

圆

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

Ø 先用一个类选择器

Ø 我们还是修饰一下这个<div class="c1"></div>的小盒子

div.c1{

width:0px;height:0px;

border:100px solid red;

}

这样我们就得到了一个正方形.

这里还是注意上面我说的,我们现在得到的是一个边长200px的一个正方形.而我们的圆的圆角是用半径为单位的.

那我们修饰一下这个正方形,加一句:

border-radius:100px;

这句意思是要将刚才得到的正方,做一个半径为100px的圆角.

效果如下:

☛画圆形的完整代码如下:

<!DOCTYPE html>

<html>

<head>

<title>圆_circle</title>

<style>

div.c1{

width:0px;height:0px;

border:100px solid red;

border-radius:100px;

}

</style>

</head>

<body>

</body>

</html>

说了这么多,我们可以画爱心了么!??(知道各位看官已近迫不及待了).

首先我们看这个爱心.

看到这里你肯定会(⊙o⊙)哦一声,原来我们的爱心就是一个正方形和2个圆(或者说半圆组成的啊).

那既然有思路了我们就来写吧.

Ø 先用一个类选择器

Ø 然后修饰一下

CSS部分:

div.red_heart1{

position:absolute;

top:100px;

left:0px;

width:0px;height:0px;

border:100px solid purple;

border-radius:100px;

display:inline-block;

}

这里你会发现和之前画圆代码有不一样的地方.

position:absolute;

top:100px;

left:0px;

这三句是给我的圆,定位置,圆离浏览器顶部100px,左边0px,就是左边的那个紫色的圆.

Display:inline-block;

这句是行内块的意思,不加这一句的话你会发现我们后面的的元素都会各自占一行.就是垂直排列的.

Ø 好了,我们来第二个元素,中间的那个红色的正方形.

还是用一个类选择器<div class="red_heart2"></div>

CSS部分:

div.red_heart2{

position:absolute;

top:100px;

left:100px;

width:0px;height:0px;

border:100px solid red;

display:inline-block;

}

位置是距离顶部:100px;距离左边100px;

Ø 再来第三个元素,右边的那个粉红的圆.

用一个类选择器<div class="red_heart3"></div>

CSS部分:

div.red_heart3{

position:absolute;

top:0px;

left:100px;

width:0px;height:0px;

border:100px solid pink;

border-radius:100px;

display:inline-block;

}

位置是距离顶部:0px;距离左边100px;

好了我们就得到了上面的那个爱心了.不过你会说,这个桃心和我们平常看到的不一样啊,第一个是倒着的,第二个颜色太花了,我要一颗闪闪的大红心❤.

好的,那我们要怎么才能让它转过来呢.首先我们还得要一个盒子,先把现在的三个元素都装进去,然后旋转45度就好了.

Ø 那我们这里用一个ID选择器:

然后把我之前的三个元素装进去:<div id="red_heart"><div class="red_heart1"></div><div class="red_heart2"></div><div class="red_heart3"></div></div>

CSS部分:

#red_heart{

position:absolute;

top:-100px;

left:200px;

width:0px;height:0px;

border:0px solid transparent;

transform:rotate(45deg);

display:inline-block;

}

最后记得把两个圆的颜色改一下.

改好后,效果如下:

如果要画2个爱心怎么办.

Ø 简单我们再加一个ID选择器,然后改一下爱心的位置就好了.

CSS部分:

#red_heart1{

position:absolute;

top:-100px;

left:600px;

width:0px;height:0px;

border:0px solid transparent;

transform:rotate(45deg);

display:inline-block;

}

☛两个爱心的完整代码如下:

<!DOCTYPE html>

<html>

<head>

<title>red_heart</title>

<style>

div.red_heart1{

position:absolute;

top:100px;

left:0px;

width:0px;height:0px;

border:100px solid red;

border-radius:100px;

display:inline-block;

}

div.red_heart2{

position:absolute;

top:100px;

left:100px;

width:0px;height:0px;

border:100px solid red;

display:inline-block;

}

div.red_heart3{

position:absolute;

top:0px;

left:100px;

width:0px;height:0px;

border:100px solid red;

border-radius:100px;

display:inline-block;

}

#red_heart{

position:absolute;

top:-100px;

left:200px;

width:0px;height:0px;

border:0px solid transparent;

transform:rotate(45deg);

display:inline-block;

}

#red_heart1{

position:absolute;

top:-100px;

left:600px;

width:0px;height:0px;

border:0px solid transparent;

transform:rotate(45deg);

display:inline-block;

}

</style>

</head>

<body>

</body>

</html>

效果图:

这里再贴2张别的效果图

五角星美队盾牌

这个2张图的画法,下次再说.

一步一步教你用CSS画爱心相关推荐

php爱心代码,使用CSS画爱心代码实例
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: css画桃心 .heart-body { width: 500px; margin ...
css画心形原理,科技常识：使用CSS画爱心的过程详解
今天小编跟大家讲解下有关使用CSS画爱心的过程详解 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用CSS画爱心的过程详解的相关资料,希望小伙伴们看了有所帮助. 今天小颖给大家分享一个 ...
html怎么让爱心闪动,css画爱心并实现“爱心跳动”
第一次写博客,来记录自己在前端上的成长,并且希望能够借鉴到其他大神的经验来提高自己的水平.这次打算用css来画一个爱心并实现"爱心跳动"的功能,下面如果有表述不正确的叙述,欢迎各位 ...
情人节，教大家使用CSS画出一朵玫瑰花。
情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果首先我们画 ...
手把手教你用css画网格
最近一个项目需要网格背景.UI把网格当做图帮我切好了,我一看,这明明可以直接用css直接画嘛,能直接减少体积.对于有技术追求的前端,我就研究了一下怎样画这个高逼格的网格背景: 先看最终效果图(图片有点 ...
用html css实现五角星,用CSS画五角星
五角星 #star-five { margin: 50px; position: relative; display: block; color: red; width: 0; height: 0; ...
用纯CSS画一颗爱心
来源 | https://www.cnblogs.com/liu-en-ci/p/6721963.html CSS是一个需要深度挖掘的东西,里面有很多样式属性,掌握几个常用的便可以实现很好看的效果,例 ...
用纯CSS画一颗爱心，这波操作可还行？
来源 | https://www.cnblogs.com/liu-en-ci/p/6721963.html CSS是一个需要深度挖掘的东西,里面有很多样式属性,掌握几个常用的便可以实现很好看的效果,例 ...
一步一步教你安装Nginx+PHP+Mysql
发现很多VPS用LNMP一键安装包都失败,有不能排错,唯有给出教程,一步一步教你安装,所谓授人于鱼不如授人于渔嘛,本文是在CentOS 5.4 操作系统下测试通过的,用的是DiaHosting上的 ...

一步一步教你用CSS画爱心

一步一步教你用CSS画爱心

一步一步教你用CSS画爱心相关推荐

最新文章

热门文章