CSS3基础使用CSS阴影属性简单实现太阳图案的步骤

使用CSS阴影属性简单实现太阳图案的步骤

CSS阴影属性可以轻松的将一个元素复制一份,本文主要分享简单的利用CSS阴影属性这个特点实现一个太阳的图案,太阳图案一般可由中间的圆形和四周的“光线”组成,下面先实现这个圆:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
#sun {
 margin:150px;
 background-color:#f90;color:#fe4;
 width:200px;height:200px;
 border-radius:50%;
 position:relative;
}
</style>
</head>
<body>
<div id="sun">
 <div class="sunny"></div>
</div>
</body>
</html>

这里定义了一个宽200px高200px的正方形,并通过圆角属性将其变成一个圆形:

CSS太阳1.png

实现圆形四周的“光线”有很多方法,这里主要通过阴影属性实现:

#sun:before {
 content:" ";
 width:50px;height:20px;margin:auto;
 position:absolute;left:0;right:0;top:0;bottom:0;
 border-radius:15px;
 background-color:#333; /*--本句之后可删除--*/
 box-shadow:150px 0px 0 1px currentColor,-150px 0 0 1px currentColor;
}

这里定义了一个宽50px高20px的小矩形的“光线”图案,将其定位到圆形的中间,并通过阴影属性在圆形的左边和右边分别“复制”一份该图案,再设置圆角装饰,便得到左右两道“太阳光”:

CSS太阳2.png

这里的背景颜色background-color:#333只是为了便于观察,其实是可以删除的。同样的方法,还可以通过伪类在垂直方向再实现两道“太阳光”:

#sun:after {
 content:" ";
 width:20px;height:50px;margin:auto;
 position:absolute;left:0;right:0;top:0;bottom:0;
 border-radius:15px;
 box-shadow:0px 150px 0 1px currentColor,0 -150px 0 1px currentColor;
}

这样以来,上下左右的四道光线就做好了:

CSS太阳3.png

接下来通过类似的方法,设置45度和135度方向的几条光线,可以这么做:

.sunny {
 position:absolute;left:0;right:0;top:0;bottom:0;
 width:20px;height:50px;margin:auto;
 transform:rotate(45deg);
 border-radius:15px;
 box-shadow:0px 150px 0 1px currentColor,0 -150px 0 1px currentColor;
}
.sunny:after {
 content:" ";
 position:absolute;
 width:20px;height:50px;margin:auto;
 transform:rotate(90deg);
 border-radius:15px;
 box-shadow:0 150px 0 1px currentColor,0 -150px 0 1px currentColor;
}

这里将子元素以相似的方法定义了其他的几道光线,在子元素和其伪元素上分别旋转45度和90度刚好就是相应的位置,于是整个太阳的图案就做好了:

CSS太阳4.png

顺便给它来个旋转的动画吧(请点这里查看demo):

@keyframes run {
 to {transform:rotate(360deg);}
}
#sun {animation:run 30s linear infinite;}

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