一步一步教你用CSS画爱心
2016-05-22 21:48
1031 查看
一步一步教你用CSS画爱心
CSS有很多小魔法，今天就介绍一种画爱心的方法(是纯CSS画的哦)。网上有很多教程，但这个画法是本人原创哦~———————————来自北极熊猫的分割线———————————————
1、画爱心之前，首先介绍一下用CSS画正方形、三角形、还有圆。至于为什么，到画爱心的时候会告诉大家。
正方形
Ø 我们先学一下CSS画一个正方形的画法。
这里我们用一个类选择器
<div class="c1"></div>
Ø 然后我们修饰一下这个<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>
<meta charset="utf-8" />
<title>正方形_Square</title>
<style>
div.c1{
width:0px;height:0px;
border:100px solid red;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
直角三角形
其实我们一看这个直角三角不正好是半个正方形么,我们只要把一个完整的正方形的一半不就好了么。
思路有了,我们就开始写代码了,不过再这之前我们先画一个不一样的正方形。
还是一样我们先弄一个正方形再说:
Ø 先用一个类选择器
<div class="c1"></div>
Ø 我们还是修饰一下这个<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.
效果如下:
4000
注意修饰的顺序是:上→右→下→左.
那能把上面和右边的2块隐藏掉多少.
那我们改一下刚才那句代码:border-color:transparent transparent red red;
(Transparent是隐藏的意思)
修改好效果如下:
刚好是我们想要的一个三角形.
☛画直角三角形完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三角形_triangle</title>
<style>
div.c1{
width:0px;height:0px;
border: 100px solid red;
border-color:transparent transparent red red;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
圆
画圆形的思路还是一样,我们先得到一个正方形,然后将正方形的4个角做圆角处理就好了.
Ø 先用一个类选择器
<div class="c1"></div>
Ø 我们还是修饰一下这个<div class="c1"></div>的小盒子
div.c1{
width:0px;height:0px;
border:100px solid red;
}
这样我们就得到了一个正方形.
这里还是注意上面我说的,我们现在得到的是一个边长200px的一个正方形.而我们的圆的圆角是用半径为单位的.
那我们修饰一下这个正方形,加一句:
border-radius:100px;
这句意思是要将刚才得到的正方,做一个半径为100px的圆角.
效果如下:
☛画圆形的完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圆_circle</title>
<style>
div.c1{
width:0px;height:0px;
border:100px solid red;
border-radius:100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
说了这么多,我们可以画爱心了么!??(知道各位看官已近迫不及待了).
首先我们看这个爱心.
看到这里你肯定会(⊙o⊙)哦一声,原来我们的爱心就是一个正方形和2个圆(或者说半圆组成的啊).
那既然有思路了 我们就来写吧.
Ø 先用一个类选择器
<div class="red_heart1"></div>
Ø 然后修饰一下
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>
然后把我之前的三个元素装进去:<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选择器,然后改一下爱心的位置就好了.
<div id="red_heart1"><div class="red_heart1"></div><div class="red_heart2"></div><div class="red_heart3"></div></div>
CSS部分:
#red_heart1{
position:absolute;
top:-100px;
left:600px;
width:0px;height:0px;
a7fc
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>
<div id="red_heart"><div class="red_heart1"></div><div class="red_heart2"></div><div class="red_heart3"></div></div>
<div id="red_heart1"><div class="red_heart1"></div><div class="red_heart2"></div><div class="red_heart3"></div></div>
</body>
</html>
效果图:
这里再贴2张别的效果图
五角星 美队盾牌
这个2张图的画法,下次再说.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- 设计更快的网页（三）：字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''