当前位置：首页 > 网页特效 > 文字效果

jQuery扁平化图标文字长阴影特效插件

分类：文字效果日期：2024-05-14 点击(3) 评论(0)

简介

这是一款效果十分炫酷的jQuery扁平化图标文字阴影特效插件。近几年来，扁平化设计已经成为前端网页开发的一个时髦领域。扁平化设计在各种移动和桌面应用中随处可见。在这款插件中，使用jQuery来模拟扁平化设计的长阴影效果。

##### HTML结构
使用该扁平化字体图标长阴影插件，首先要在页面中引入 jquery 和jquery.flatshadow.js文件。

##### HTML
```html
</pre>
<div class="flat-icon">FLAT</div>
<div class="flat-icon">UI</div>
<div class="flat-icon">IS</div>
<div class="flat-icon">PRETTY</div>
<div class="flat-icon">AWESOME</div>
<pre>
```
##### CSS
```html
.flat-icon {
  padding:23px 28px;
    font-size: 45px;
    font-weight: bold;
    display: inline-block;
    line-height: 100%;
    overflow: hidden;
    text-transform: uppercase;
    margin-right: 15px;
}
```
##### JAVASCRIPT
通过下面的语句来调用该扁平化字体图标长阴影插件。

```html
$(".flat-icon").flatshadow({
  color: "#3498DB",
  angle: "SE",
  fade: false,
  boxShadow: false // Accept full 6 digit hex color (#000000)
});
```
通过上面的代码，可以制作出DEMO1中的扁平化文字长阴影效果，阴影的方向是东南方向。效果如下图：
![](http://img.htmleaf.com/1501/flat-shadow-demo-1.jpg)

颜色参数(color)允许你设置元素背景的颜色，如果你不设置任何颜色，插件将自动从预定义的色板中随机挑取一种颜色。

角度参数(angle)用于定制.flat-icon容器中的元素的阴影方向。方向可设置为"N"(北边)、"S"(南边)、"E"(东边)或"W"(西边)，或者是它们的组合，如"SE"(东南)、"NW"(西北)等等。如果你不设置方向，插件将随机给出一个方向。

摄用fade参数，会在元素内部产生一个扁平的阴影效果。你可以将它设置为true来制作一张渐变的效果。例如DEMO4的效果，如下图：

![](http://img.htmleaf.com/1501/flat-shadow-demo-4.jpg)

使用boxShadow参数你也可以创建同样的阴影效果，但不是在元素内部，而是在元素的外部容器上。该参数接收6个字符的HEX颜色值。例如：如果你想添加一个黑色的外部阴影效果，可以简单的将上面代码中的"false"该为"#000000"。外部容器将有一个和文字阴影方向相同的阴影效果。

高级定制
如果你需要为每一个元素都自定义一种样式，可以使用下面的html结构：

```html
</pre>
<div class="flat-icon" data-color="#2ecc71" data-angle="NE">FLAT</div>
<div class="flat-icon" data-color="#1ABC9C" data-angle="NW">UI</div>
<div class="flat-icon" data-color="#3498db" data-angle="SE">IS</div>
<div class="flat-icon" data-color="#9b59b6" data-angle="SW">PRETTY</div>
<div class="flat-icon" data-color="#34495e" data-angle="NE">AWESOME</div>
<pre>
```
然后使用下面的JS代码来调用它：

```html
$(".flat-icon").flatshadow({
    fade: false,
    boxShadow: false
});
```
这样你就可以将每一个元素都渲染成不同的长阴影效果，背景颜色也不相同。如下图：
![扁平化字体图标长阴影效果-2](http://img.htmleaf.com/1501/flat-shadow-demo-2.jpg "扁平化字体图标长阴影效果-2")

web299.com

jQuery扁平化图标文字长阴影特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果