做设计的同学应该都知道,画ICON的时候经常需要处理长投影效果,可以自己画,也可以使用ps插件,但都需要用到photoshop软件。
这种长投影效果,除了可以通过ps来实现,在代码中也是可以实现,而且处理方式简单,所以我们也可以通过代码来画出不同的UI图标。
代码中的长投影效果,利用的是一个jQuery插件,它是基于jQuery的一个库文件,所以使用起来比较简单,插件的作者是国外的一位工程师,我只是个搬运工。
下面是实现效果:
![1479974786699610.jpg 长投影效果.jpg](http://bbs.520it.com/ueditor/php/upload/image/20161124/1479974786699610.jpg)
![1479974819123570.gif 2.gif](http://bbs.520it.com/ueditor/php/upload/image/20161124/1479974819123570.gif)
下面我们直接上代码:
首先准备基本的结构和样式;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
style
>
body{ font-size: 24px; font-family: '微软雅黑'; font-weight: bold; color: #fff; }
ul,li{ padding: 0; margin: 0; }
ul{ position: absolute; left: 50%; top: 50px; margin-left: -300px; }
li{ list-style: none; float: left; width: 100px; height: 100px; border-radius: 50%; background: pink; margin: 50px; text-align: center; line-height: 100px; overflow: hidden; }
</
style
>
<
body
>
<
ul
>
<
li
>网页</
li
>
<
li
>UI</
li
>
<
li
>学院</
li
>
</
ul
>
</
body
>
|
因为是基于jQuery的插件,所以在用的时候除了要引入要用的插件文件,还需要引入jQuery文件,否则用不了;
1
2
|
<
script
src
=
"jquery-1.7.2.min.js"
></
script
>
<
script
src
=
"jquery.flatshadow.min.js"
></
script
>
|
两个文件引入后,就可以通过js使用了;通过jQuery选中需要添加投影效果的标签即可,通过flatshadow方法来设置相关参数;以下是实现效果的完整代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Document</
title
>
<
style
>
body{ font-size: 24px; font-family: '微软雅黑'; font-weight: bold; color: #fff; }
ul,li{ padding: 0; margin: 0; }
ul{ position: absolute; left: 50%; top: 50px; margin-left: -300px; }
li{ list-style: none; float: left; width: 100px; height: 100px; border-radius: 50%; background: pink; margin: 50px; text-align: center; line-height: 100px; overflow: hidden; }
</
style
>
</
head
>
<
body
>
<
ul
>
<
li
class
=
"flat-icon"
>网页</
li
>
<
li
class
=
"flat-icon"
>UI</
li
>
<
li
class
=
"flat-icon"
>学院</
li
>
</
ul
>
<
script
src
=
"jquery-1.7.2.min.js"
></
script
>
<
script
src
=
"jquery.flatshadow.min.js"
></
script
>
<
script
>
$(function(){
$(".flat-icon").flatshadow({
color: "#ccc", //选中元素的背景颜色;如果没有指定将会随机;
angle: "SE", //投影方向参数,可选值:N, NE, E, SE, S, SW, W and NW,如果没有指定则随机;
fade: true, //渐变投影效果,true为渐变,false为实色效果;
boxShadow: "blue" // 盒子的投影颜色,(作用不大);
});
});
</
script
>
</
body
>
</
html
>
|
插件的原理主要是给标签添加了文字投影属性text-shadow而已,所以有耐心的时候也可以自己书写,只不过重复性的工作还是交给计算机吧。![](http://bbs.520it.com/ueditor/dialogs/emotion/images/ldw/aru_00001.gif)
参数注释:
color ,设置背景颜色,不指定会生成随机颜色;
angle ,投影方向,也就是投影角度,N 表示上,NE表示右上,E表示右,SE表示右下,S表示下,SW表示左下,W表示左,NW表示左上;
fade ,渐变投影效果,true为渐变,false为实色效果;
boxShadow ,选中标签外围盒子的投影颜色,用处不大;
所有参数都是可选参数,如果不指定则随机。
附件是demo文件和插件文件。
代码实现长投影效果插件.zip