CSS3基础CSS制作情人节爱心图案的简单步骤

CSS制作情人节爱心图案的简单步骤

使用CSS可以制作出各种各样的几何图案,本文将详细介绍怎样做一个常用于代表爱情的爱心图案,爱心图案并不是标准的几何图形,但是它可以通过标准几何图形拼接出来,下图可以看出一个正方形和两个圆形就可拼出一个爱心的图案:

CSS爱心图案.png

下面,我先来做这个正方形,假设正方形的边长为200px,于是:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:200px;height:200px;margin:250px auto;
 background:#f39;position:relative;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这里顺便加上加上position相对定位属性,方便之后圆形以它为参照物。

CSS爱心1.png

接下来通过before伪类属性来增加一个圆形,也就是:

div:before {
 width:200px;height:200px;content: " ";  
 background:#fc9;
 border-radius:50%;  
 position:absolute;bottom: 0px;left:-100px;
}

这里通过绝对定位使这个圆形向左偏移了正方形边长的一半,为了便于查看效果,我给这个圆形设置了不同的背景颜色,所得到的图案是:

CSS爱心2.png

同样的方法,通过after伪类属性再增加一个相同的圆形,将其定位到上方:

div:after {
 width:200px;height:200px;content: " ";  
 background:#f0d;
 border-radius: 50%;  
 position:absolute;left:0px;top:-100px;
}

同样为了便于观察,我给第二个圆形也设置了不同的背景颜色,所得到的图案是:

CSS爱心3.png

接下来将整个div块通过CSS3的旋转变形将整体旋转45度,使两个圆形处于正上方,即:

div {transform: rotate(45deg);}

这样就做成爱心的图案了,接着将两个圆形的背景颜色改为和正方形一样就可以了:

CSS爱心效果.png

CSS制作爱心图案的html和css代码综合起来为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:200px;height:200px;margin:250px auto;
 background:#f39;
 position:relative;
 transform:rotate(45deg);
}
div:before,div:after {
 width:200px;height:200px;content: " ";  
 background:#f39;border-radius:50%;  
 position:absolute;
}
div:before {bottom:0px;left:-100px;}
div:after {left:0px;top:-100px;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

下面来给爱心中间加上“情人节快乐”几个字,看看怎么样:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:200px;height:200px;margin:250px auto;
 background:#f39;
 position:relative;
 transform:rotate(45deg);
}
div:before,div:after {
 width:200px;height:200px;content: " ";  
 background:#f39;border-radius:50%;  
 position:absolute;z-index:1;
}
div:before {
 bottom:0px;left:-100px;
}
div:after {
 left:0px;top:-100px;
}
p{
 margin:0;font-size:32px;color:#fff;
 z-index:2;position:absolute;left:-15px;top:45px;
 transform:rotate(-45deg);
}
</style>
</head>
<body>
<div><p>情人节快乐</p>
</div>
</body>
</html>

CSS情人节快乐.png

通过简单的定位,将文字显示在这个爱心里面,注意这里使用了z-index属性,它用于定义定位元素的上下层叠顺序。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/87.html