【美高梅开户网址】SO热门问答,jQuery达成的立体文字渐变效果

SO热门问答:可以为半个字符应用CSS样式吗?

2014/06/13 · CSS ·
CSS

本文由 伯乐在线 –
Carman
翻译。未经许可,禁止转发!
英文出处:stackoverflow。欢迎参加翻译组。

很酷的HTML5电子书翻页动画特效,

正文分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来效仿手动翻页的职能,也得以点击书页的边框来迅速翻页。从前也享受过一款HTML5
3D书本翻页特效,3D视觉效果越发肯定。

美高梅开户网址 1

在线演示地址如下:

一路顺风的代码:

XML/HTML Code复制内容到剪贴板

  1. <div id=”shineflip”>  
  2.       <div id=”shineflip-pages”>  
  3.           <canvas id=”shineflip-canvas”></canvas>  
  4.           <canvas id=”shineflip-page-mid-canvas”></canvas>  
  5.           <section class=”page”>  
  6.               <div><img src=”images/0.jpg” width=”475″ height=”482″ /></div>  
  7.               <span style=”left:18px;”><img src=”images/zh.png” height=”482″ /></span>  
  8.           </section>  
  9.           <section class=”page” style=”background:url(images/left_pk.jpg)”>  
  10.               <div><img src=”images/1.jpg” width=”466″ height=”463″ style=”float:right;margin-top:9px;” /></div>  
  11.           </section>  
  12.           <section class=”page”>  
  13.               <div><img src=”images/2.jpg” width=”466″ height=”463″ style=”float:left;margin-top:9px;” /></div>  
  14.           </section>  
  15.           <section class=”page”>  
  16.               <div><img src=”images/3.jpg” width=”466″ height=”463″ style=”float:right;margin-top:9px;” /></div>  
  17.           </section>  
  18.           <section class=”page”>  
  19.               <div><img src=”images/4.jpg” width=”466″ height=”463″ style=”float:left;margin-top:9px;” /></div>  
  20.           </section>  
  21.           <section class=”page”>  
  22.               <div><img src=”images/5.jpg” width=”466″ height=”463″ style=”float:right;margin-top:9px;” /></div>  
  23.           </section>  
  24.           <section class=”page” style=”background:url(images/right_pk.jpg)”>  
  25.               <div><img src=”images/6.jpg” width=”466″ height=”463″ style=”float:left;margin-top:9px;” /></div>  
  26.           </section>  
  27.           <section class=”page”>  
  28.               <div><img src=”images/24.jpg” width=”475″ height=”482″ /></div>  
  29.               <span style=”right:18px;”><img src=”images/zh.png” height=”482″ /></span>  
  30.           </section>  
  31.       </div>  
  32.   </div>  

CSS样式:

CSS Code复制内容到剪贴板

  1. body, h2, p {   
  2.  margin: 0;   
  3.  padding: 0;   
  4. }   
  5.   
  6. body {   
  7.  background: url(“../images/cover.jpg”) no-repeat;   
  8.  -webkit-background-size: cover;   
  9.     -moz-background-size: cover;   
  10.     -o-background-size: cover;   
  11.     background-size: cover;   
  12.  color: #333;   
  13.  font-family: Helvetica, sans-serif;   
  14.  text-align:center;   
  15. }   
  16. #shineflip {   
  17.  /*background: url(“../images/cover.jpg”) no-repeat;*【美高梅开户网址】SO热门问答,jQuery达成的立体文字渐变效果。/  
  18.  -o-background-size: 100% 100%;    
  19.  -webkit-background-size: 100% 100%;   
  20.  -moz-background-size: 100% 100%;   
  21.  background-size: 100% 100%;   
  22.  position: absolute;   
  23. }   
  24.   
  25. #shineflip-pages    
  26. {   
  27. /*    background-color:#fafafa;*/  
  28.     background-repeat: repeat;   
  29.     position: absolute;   
  30.     z-index: 2;   
  31. }   
  32.   
  33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
      
  34.  position: absolute;   
  35.  overflow: hidden;   
  36.  color: #ffffff;   
  37. }   
  38.   
  39. #shineflip-pages .cover_front_content
      
  40. {   
  41.  position: absolute;    
  42.  z-index: 1;   
  43.  overflow:hidden;   
  44.  whitewhite-space:nowrap;   
  45.  -ms-user-select:none;   
  46.  -webkit-user-select:none;   
  47.  -moz-user-select:none;   
  48. }   
  49.   
  50. #shineflip-pages .cover_front_back   
  51. {   
  52.  position: absolute;    
  53.  z-index: 0;   
  54. }   
  55.   
  56. #shineflip-pages .cover_background_content
      
  57. {   
  58.  position: absolute;    
  59.  z-index: 1;   
  60.  overflow:hidden;   
  61.  whitewhite-space:nowrap;   
  62.  -ms-user-select:none;   
  63.  -webkit-user-select:none;   
  64.  -moz-user-select:none;   
  65. }   
  66.   
  67. #shineflip-pages .cover_background_back   
  68. {   
  69.  position: absolute;    
  70.  z-index: 0;   
  71. }   
  72.   
  73. #shineflip-pages section.pageflip    
  74. {   
  75.  display: block;   
  76.  position: absolute;   
  77.  overflow: hidden;   
  78. }   
  79.   
  80. #shineflip-pages section.page {   
  81.     //background-color: #fafafa;   
  82.  display: block;   
  83.  position: absolute;   
  84.  overflow: hidden;   
  85. }   
  86.  #shineflip-pages-flipcontent,#shineflip-pages section>div {   
  87.   display: block;   
  88.   font-size: 12px;   
  89.   position: absolute;   
  90.   overflow: hidden;   
  91.   width:100%;   
  92.   height:100%;   
  93.  }   
  94.  #shineflip-pages-flipcontent,#shineflip-pages section>span {   
  95.   display: block;   
  96.   font-size: 12px;   
  97.   position: absolute;   
  98.   overflow: hidden;   
  99.  }   
  100.  #shineflip-pages-flipcontent p,   
  101.  #shineflip-pages-flipcontent h2,   
  102.  #shineflip-pages section p,   
  103.  #shineflip-pages section h2 {   
  104.   line-height: 1.4em;   
  105.   text-align: justify;   
  106.  }   
  107.   
  108. #shineflip-canvas {   
  109.  position: absolute;   
  110.  z-index: 0;   
  111. }   
  112.   
  113. #shineflip-page-mid-canvas {   
  114.  position: absolute;   
  115.  pointer-events: none;   
  116.  z-index: 0;   
  117. }   

以上就是本文的全体内容,希望大家喜爱。

本文分享一款很酷的HTML5电子书翻页动画特效,那款HTML5翻页动画能够用鼠标拖动页面来效仿手动翻页的效…

先截八个图看看:

为我们推荐三款不错的多个JQuery
音信头条淡入淡出效果代码,各位有亟待明白的同学可进入参考。

Mathew MacLean 提问

本身正在搜索:

一种格局为半个字符应用样式(在那种景色下,5/10的字母是透明的)。

自个儿当下一度查找并尝试的(不走运)

  • 渲染八分之四字符/字母的主意
  • 用CSS或JavaScript渲染字符的一部分
  • 对一个字符的3/6利用CSS

以下是自个儿尝试完成的贰个例证:

美高梅开户网址 2

以此是还是不是有贰个CSS恐怕JavaScript的解决格局存在,如故我必须利用图片的艺术?小编不情愿利用图片的不二法门,因为文件将最终是动态变化的。

 

美高梅开户网址 3

来自 Arbel 的特级回答:(1280+ 赞)

美高梅开户网址 4

代码

已做成二个插件,放 Github 上了!

功能很正确啊?会不会误以为那几个字体是图形?那可不是图片,而是用JS达成的

 代码如下

演示 | 下载 Zip | Half-Style.com (重定向到GitHub)


  • 单个字符的纯css
  • JavaScript用来机关覆盖文本或多字符
  • 保安文本的可读性,盲人或视障人员使用的屏幕阅读器可识别

在线演示

复制代码

首先局地: 基本化解方案

美高梅开户网址 5

演示: 


那种办法用于其他动态文本或单个字符,并且都是机动适用的。全部你需求做的就是在目的文本上添加一个class,剩下的就消除了。

还要,保留了初稿的可访问性,可以被盲人或视障人员使用的显示屏阅读器识别。

单个字符的落实

纯CSS。全体你须要做的就是把.halfStyle
class用在各样你想要渲染2/4体制字符的成分上。

对此各种包蕴字符的span成分,你可以加上二个data属性,比如data-content=”X”,并且在伪成分上使用content:attr(data-content);那样,.halfStyle:before class将会是动态的,你不必要为各样实例举办硬编码

肆意文本的兑现

只需添加textTo哈尔fStyle class到含有文本的因素上。


CSS:

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px;
/* or any font size will work */ color: black; /* or transparent, any
color */ overflow:hidden; white-space: pre; /* to preserve the spaces
from collapsing */ } .halfStyle:before { display:block; z-index:1;
position:absolute; top:0; left:0; width: 50%; content:
attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden; color: #f00; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #f00;
}

HTML

JavaScript

<p>Single Characters:</p> <span class=”halfStyle”
data-content=”X”>X</span> <span class=”halfStyle”
data-content=”Y”>Y</span> <span class=”halfStyle”
data-content=”Z”>Z</span> <span class=”halfStyle”
data-content=”A”>A</span> <hr/>
<p>Automated:</p> <span
class=”textToHalfStyle”>Half-style, please.</span>

1
2
3
4
5
6
7
8
9
10
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>
 
<hr/>
<p>Automated:</p>
 
<span class="textToHalfStyle">Half-style, please.</span>

它会自行生效,只要添加 textToHalfStyle class到含有文本的成分上。

jQuery 自动情势:

JavaScript

jQuery(function($) { var text, chars, $el, i, output; // Iterate over
all class occurences $(‘.textToHalfStyle’).each(function(idx, el) { $el
= $(el); text = $el.text(); chars = text.split(”); // Set the
screen-reader text $el.html(‘<span style=”position: absolute
!important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px,
1px);”>’ + text + ‘</span>’); // Reset output for appending
output = ”; // Iterate over all chars in the text for (i = 0; i <
chars.length; i++) { // Create a styled element for each character and
append to container output += ‘<span aria-hidden=”true”
data-content=”‘ + chars[i] + ‘”>’ + chars[i] + ‘</span>’; }
// Write to DOM only once $el.append(output); }); });

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
jQuery(function($) {
    var text, chars, $el, i, output;
 
    // Iterate over all class occurences
    $(‘.textToHalfStyle’).each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split(”);
 
        // Set the screen-reader text
        $el.html(‘&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;’ + text + ‘&lt;/span&gt;’);
 
        // Reset output for appending
        output = ”;
 
        // Iterate over all chars in the text
        for (i = 0; i &lt; chars.length; i++) {
            // Create a styled element for each character and append to container
            output += ‘&lt;span aria-hidden="true" data-content="’ + chars[i] + ‘"&gt;’ + chars[i] + ‘&lt;/span&gt;’;
        }
 
        // Write to DOM only once
        $el.append(output);
    });
});

演示: 


上面来回顾分享下已毕进度及原理(网站中利用了jquery那些lib,大家那边就不再本人独自完结了,大家那边分享的也是jquery的贯彻格局):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文档</title>
<script type=’text/javascript’
src=’jquery-1.2.6.min.js’></script>
<style type=”text/css”>
#gallery1 {width:100%; overflow:hidden;}
#gallery1 a {position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(zoom.png);
background-repeat:no-repeat; width:48px; height:48px; position:absolute;
left:15px; top:15px;}
#gallery1 img { border: solid 1px #999; padding:5px;}
#gallery1 a:hover span { display:block;}
 
#gallery2 {width:100%; overflow:hidden;}
#gallery2 a {position:relative; float:left; margin:5px;}
#gallery2 a span { display:none; background-image:url(zoom.png);
background-repeat:no-repeat; width:48px; height:48px; position:absolute;
left:15px; top:15px;}
#gallery2 img { border: solid 1px #999; padding:5px;}
 
</style>
<script>
$(document).ready(function(){
    $(“#gallery2 a”).append(“<span></span>”);
    $(“#gallery2 a”).hover(function(){
        $(this).children(“span”).fadeIn(600);
    },function(){
        $(this).children(“span”).fadeOut(200);
    });
});
</script>
</head>
<body>
<div id=”gallery1″>
    <h2>CSS solution</h2>
    <a href=”1.jpg”>
        <span></span>
        <img src=”1.jpg” alt=”” />
    </a>
    <a href=”2.jpg”>
        <span></span>
        <img src=”2.jpg” alt=”” />
    </a>
</div>
 
<div id=”gallery2″>
    <h2>jQuery solution</h2>
    <a href=”1.jpg”>
        <img src=”1.jpg” alt=”” />
    </a>
    <a href=”2.jpg”>
        <img src=”2.jpg” alt=”” />
    </a>
</div> 
</body>
</html>

其次局地:先进的解决方案-独立的左边和右手

美高梅开户网址 6

选取那种措施您可以分别独立的渲染左边和右手部分。

一切都以相同的,只是更尖端的CSS在发挥功能。

演示: 

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px;
/* or any font size will work */ color: transparent; /* hide the base
character */ overflow:hidden; white-space: pre; /* to preserve the
spaces from collapsing */ } .halfStyle:before { /* creates the left
part */ display:block; z-index:1; position:absolute; top:0; width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element
*/ overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */ }
.halfStyle:after { /* creates the right part */ display:block;
direction: rtl; /* very important, will make the width to start from
right */ position:absolute; z-index:2; top:0; left:50%; width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element
*/ overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }

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
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}


HTML代码:

例2

其三片段:混合-匹配和改革

于今我们领悟怎样是唯恐的,让大家来添加一些花样。


复制代码 代码如下:

 代码如下

-水平5/10

美高梅开户网址 7

Demo

JavaScript

.halfStyle { position:relative; display:inline-block; font-size:80px;
/* or any font size will work */ color: transparent; /* hide the base
character */ overflow:hidden; white-space: pre; /* to preserve the
spaces from collapsing */ } .halfStyle:before { /* creates the top
part */ display:block; z-index:2; position:absolute; top:0; height:
50%; content: attr(data-content); /* dynamic content for the pseudo
element */ overflow:hidden; pointer-events: none; /* so the base char
is selectable by mouse */ color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */ }
.halfStyle:after { /* creates the bottom part */ display:block;
position:absolute; z-index:1; top:0; height: 100%; content:
attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }

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
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}


<span class=”rainbows”>© 2009 Dragon Interactive. All Rights
Reserved.</span>

复制代码

-垂直1/3

美高梅开户网址 8

Demo

JavaScript

.halfStyle { /* base char and also the right 1/3 */ position:relative;
display:inline-block; font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */ overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */ color:
#f0f; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for
demo purposes */ } .halfStyle:before { /* creates the left 1/3 */
display:block; z-index:2; position:absolute; top:0; width: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element
*/ overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */ }
.halfStyle:after { /* creates the middle 1/3 */ display:block;
z-index:1; position:absolute; top:0; width: 66.66%; content:
attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }

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
.halfStyle { /* base char and also the right 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the left 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    width: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}


为了便利代码重用,咱们通过class来标识出什么样文字须要充实那一个特效,这里用的是rainbows。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<title></title>
<style>
a { color:#CCCCCC}
li { list-style:none;}
span { padding-right:20px; color:#FFFFFF; font-weight:bold;}
</style>
</head>
<body>
<div id=”ticker” style=”padding:10px; background:#333333″>
        <!– START TICKER VER 1.0.1 –>
<script
src=””
type=”text/javascript”></script>
<script type=”text/javascript”>
/* =========================================================
// jquery.innerfade.js
// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail:
[email protected]
// Web:
// based on the work of Matt Oakes

// and Ralf S. Engelschall
*
*  <ul id=”news”>
*      <li>content 1</li>
*      <li>content 2</li>
*      <li>content 3</li>
*  </ul>
*
*  $(‘#news’).innerfade({
*      animationtype: Type of animation ‘fade’ or ‘slide’ (Default:
‘fade’),
*      speed: Fading-/Sliding-Speed in milliseconds or keywords (slow,
normal or fast) (Default: ‘normal’),
*      timeout: Time between the fades in milliseconds (Default:
‘2000’),
*      type: Type of slideshow: ‘sequence’, ‘random’ or ‘random_start’
(Default: ‘sequence’),
*         containerheight: Height of the containing element in any
css-height-value (Default: ‘auto’),
*      runningclass: CSS-Class which the container get’s applied
(Default: ‘innerfade’),
*      children: optional children selector (Default: null)
*  });
*
// ========================================================= */
(function($) {
    $.fn.innerfade = function(options) {
        return this.each(function() {
            $.innerfade(this, options);
        });
    };
    $.innerfade = function(container, options) {
        var settings = {
                ‘animationtype’:    ‘fade’,
            ‘speed’:            ‘normal’,
            ‘type’:             ‘sequence’,
            ‘timeout’:          2000,
            ‘containerheight’:  ‘auto’,
            ‘runningclass’:     ‘innerfade’,
            ‘children’:         null
        };
        if (options)
            $.extend(settings, options);
        if (settings.children === null)
            var elements = $(container).children();
        else
            var elements = $(container).children(settings.children);
        if (elements.length > 1) {
            $(container).css(‘position’, ‘relative’).css(‘height’,
settings.containerheight).addClass(settings.runningclass);
            for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css(‘z-index’,
String(elements.length-i)).css(‘position’, ‘absolute’).hide();
            };
            if (settings.type == “sequence”) {
                setTimeout(function() {
                    $.innerfade.next(elements, settings, 1, 0);
                }, settings.timeout);
                $(elements[0]).show();
            } else if (settings.type == “random”) {
                    var last = Math.floor ( Math.random () * (
elements.length ) );
                setTimeout(function() {
                    do {
                                                current = Math.floor (
Math.random ( ) * ( elements.length ) );
                                        } while (last == current );
                                        $.innerfade.next(elements,
settings, current, last);
                }, settings.timeout);
                $(elements[last]).show();
                        } else if ( settings.type == ‘random_start’ )
{
                                settings.type = ‘sequence’;
                                var current = Math.floor ( Math.random
() * ( elements.length ) );
                                setTimeout(function(){
                                    $.innerfade.next(elements, settings,
(current + 1) %  elements.length, current);
                                }, settings.timeout);
                                $(elements[current]).show();
                        }    else {
                            alert(‘Innerfade-Type must either be
‘sequence’, ‘random’ or ‘random_start”);
                        }
                }
    };
    $.innerfade.next = function(elements, settings, current, last) {
        if (settings.animationtype == ‘slide’) {
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        } else if (settings.animationtype == ‘fade’) {
            $(elements[last]).fadeOut(settings.speed);
            $(elements[current]).fadeIn(settings.speed, function() {
                            removeFilter($(this)[0]);
                        });
        } else
            alert(‘Innerfade-animationtype must either be ‘slide’ or
‘fade”);
        if (settings.type == “sequence”) {
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current – 1;
            } else {
                current = 0;
                last = elements.length – 1;
            }
        } else if (settings.type == “random”) {
            last = current;
            while (current == last)
                current = Math.floor(Math.random() *
elements.length);
        } else
            alert(‘Innerfade-Type must either be ‘sequence’, ‘random’ or
‘random_start”);
        setTimeout((function() {
            $.innerfade.next(elements, settings, current, last);
        }), settings.timeout);
    };
})(jQuery);
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
    if(element.style.removeAttribute){
        element.style.removeAttribute(‘filter’);
    }
}
</script>
<script type=”text/javascript”>
  jQuery.noConflict();
  // Use jQuery via jQuery(…)
     jQuery(document).ready(function(){
    jQuery(‘#news’).innerfade({
                         speed: ‘1’,
                         timeout: 2000,
                         containerheight: 20,
                         animationtype: ‘fade’
      });
    });
  </script>
        <ul id=”news” style=”overflow: hidden; display:block;
margin:0; clear:both”>
          <li style=”z-index: 5; position: absolute; display:
none;”><span>HOT NEWS</span><a href=”#”>Racing has
begun at the 2009 AllegroCup Windsurfing Championship in ?eba, Poland.
This event, organised by… </a></li>
          <li style=”z-index: 4; position: absolute; display:
none;”><span>HOT NEWS</span><a href=”#”>Sean is
currently racing at the Euro-Challenger FW Event in Pobierowo, Poland. A
small seaside town on the… </a></li>
          <li style=”z-index: 3; position: absolute; display:
list-item;”><span>HOT NEWS</span><a href=”#”>Sean
will be joining the dark side of windsurfing this season, on the
International Team for Point-7 sails…. </a></li>
          <li style=”z-index: 2; position: absolute; display:
none;”><span>HOT NEWS</span><a href=”#”>Sean’s all
new website for 2009 launched today! Stay tuned for features on many CSS
galleries once more. The… </a></li>
          <li style=”z-index: 1; position: absolute; display:
none;”><span>HOT NEWS</span><a href=”#”>Sean has
just arrived in Europe and settled in to his training-base in the
Netherlands, preparing for this… </a></li>
        </ul>
        <!– END TICKER –>
      </div>
</body>
</html>

-水平 1/3

美高梅开户网址 9

Demo

JavaScript

.halfStyle { /* base char and also the bottom 1/3 */
position:relative; display:inline-block; font-size:80px; /* or any font
size will work */ color: transparent; overflow:hidden; white-space:
pre; /* to preserve the spaces from collapsing */ color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }
.halfStyle:before { /* creates the top 1/3 */ display:block;
z-index:2; position:absolute; top:0; height: 33.33%; content:
attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ }
.halfStyle:after { /* creates the middle 1/3 */ display:block;
position:absolute; z-index:1; top:0; height: 66.66%; content:
attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }

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
.halfStyle { /* base char and also the bottom 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent;
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the top 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}


CSS代码:

新闻头条淡入淡出效果代码,各位有亟待精晓的同学可进入参考。 例 代码
代码如下 复制代码 !DOCTYPE html…

-HalfStyle改进 @KevinGranger

美高梅开户网址 10

DEMO

JavaScript

body{ background-color: black; } .textToHalfStyle{ display:block;
margin: 200px 0 0 0; text-align:center; } .halfStyle { font-family:
‘Libre Baskerville’, serif; position:relative; display:inline-block;
width:1; font-size:70px; color: black; overflow:hidden; white-space:
pre; text-shadow: 1px 2px 0 white; } .halfStyle:before { display:block;
z-index:1; position:absolute; top:0; width: 50%; content:
attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden; color: white; }

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
body{
    background-color: black;
}
 
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
 
.halfStyle {
    font-family: ‘Libre Baskerville’, serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}


复制代码 代码如下:

 -PeelingStyle 改进的 HalfStyle @SamTremaine

美高梅开户网址 11

.rainbows{position:relative;display:block;} .rainbow { background:
transparent; display: block; position: relative; height: 1px; overflow:
hidden; z-index: 5; } .rainbow span { position: absolute; display:
block; top: 0; left: 0px; } .rainbows .highlight { color: #fff;
display:block; position: absolute; top: -2px; left: 0px; z-index: 4; }
.rainbows .shadow { color: #000; display:block; position: absolute;
opacity: 0.5; filter:alpha(opacity=50); top: 2px; left: 2px; z-index: 3;
}.rainbows{position:relative;display:block;}
.rainbow {
background: transparent;
display: block;
position: relative;
height: 1px;
overflow: hidden;
z-index: 5;
}

Demo and on samtremaine.co.uk

演示 和 samtremaine.co.uk

JavaScript

.halfStyle { position: relative; display: inline-block; font-size: 68px;
color: rgba(0, 0, 0, 0.8); overflow: hidden; white-space: pre;
transform: rotate(4deg); text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3); }
.halfStyle:before { /* creates the left part */ display: block;
z-index: 1; position: absolute; top: -0.5px; left: -3px; width: 100%;
content: attr(data-content); overflow: hidden; pointer-events: none;
color: #FFF; transform: rotate(-4deg); text-shadow: 0px 0px 1px #000;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}


.rainbow span {
position: absolute;
display: block;
top: 0;
left: 0px;
}

第6某个:准备生育

定制不一致的哈尔f-Style样式集可以用在同一个页面的所需成分上。你可以定义五个样式集并告诉插件要用哪三个。

插件在目标.textTo哈尔fStyle成分上采用data属性data-halfstyle=”[-CustomClassName-]”,全部都会自动改变。

因此,只要含有文本的成分添加了textToHalfStyle class和data属性 data-halfstyle="[-CustomClassName-]",插件将完成剩下的工作。

美高梅开户网址 12

一律页面中多个哈尔f-Styles的 演示

JavaScript

jQuery(function($) { var halfstyle_text, halfstyle_chars,
$halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style; //
Iterate over all class occurrences
$(‘.textToHalfStyle’).each(function(idx, halfstyle_el) { $halfstyle_el
= $(halfstyle_el); halfstyle_style = $halfstyle_el.data(‘halfstyle’);
halfstyle_text = $halfstyle_el.text(); halfstyle_chars =
halfstyle_text.split(”); // Set the screen-reader text
$halfstyle_el.html(‘<span style=”position: absolute !important;clip:
rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);”>’ +
halfstyle_text + ‘</span>’); // Reset output for appending
halfstyle_output = ”; // Iterate over all chars in the text for
(halfstyle_i = 0; halfstyle_i < halfstyle_chars.length;
halfstyle_i++) { // Create a styled element for each character and
append to container halfstyle_output += ‘<span aria-hidden=”true”
data-content=”‘ + halfstyle_chars[halfstyle_i] + ‘”>’ +
halfstyle_chars[halfstyle_i] + ‘</span>’; } // Write to DOM
only once $halfstyle_el.append(halfstyle_output); }); });

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
jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
 
    // Iterate over all class occurrences
    $(‘.textToHalfStyle’).each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data(‘halfstyle’);
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split(”);
 
        // Set the screen-reader text
        $halfstyle_el.html(‘&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;’ + halfstyle_text + ‘&lt;/span&gt;’);
 
        // Reset output for appending
        halfstyle_output = ”;
 
        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i &lt; halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += ‘&lt;span aria-hidden="true" data-content="’ + halfstyle_chars[halfstyle_i] + ‘"&gt;’ + halfstyle_chars[halfstyle_i] + ‘&lt;/span&gt;’;
        }
 
        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

其它,CSS样式集class的概念匹配上述的 [-CustomClassName-] 部分,并且链到.halfStyle,因而大家将有.halfStyle.[-CustomClassName-]

JavaScript

/* start half-style hs-base */ .halfStyle.hs-base { position:relative;
display:inline-block; font-size:80px; /* or any font size will work */
overflow:hidden; white-space: pre; /* to preserve the spaces from
collapsing */ color: #000; /* for demo purposes */ }
.halfStyle.hs-base:before { display:block; z-index:1; position:absolute;
top:0; width: 50%; content: attr(data-content); /* dynamic content for
the pseudo element */ pointer-events: none; /* so the base char is
selectable by mouse */ overflow:hidden; color: #f00; /* for demo
purposes */ } /* end half-style hs-base */ /* start half-style
hs-horizontal-third */ .halfStyle.hs-horizontal-third { /* base char
and also the bottom 1/3 */ position:relative; display:inline-block;
font-size:80px; /* or any font size will work */ color: transparent;
overflow:hidden; white-space: pre; /* to preserve the spaces from
collapsing */ color: #f0f; text-shadow: 2px 2px 0px #0af; /* for
demo purposes */ } .halfStyle.hs-horizontal-third:before { /* creates
the top 1/3 */ display:block; z-index:2; position:absolute; top:0;
height: 33.33%; content: attr(data-content); /* dynamic content for the
pseudo element */ overflow:hidden; pointer-events: none; /* so the
base char is selectable by mouse */ color: #f00; /* for demo purposes
*/ text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ }
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
display:block; position:absolute; z-index:1; top:0; height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element
*/ overflow:hidden; pointer-events: none; /* so the base char is
selectable by mouse */ color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */ } /* end
half-style hs-horizontal-third */ /* start half-style hs-PeelingStyle,
by user SamTremaine on Stackoverflow.com */ .halfStyle.hs-PeelingStyle
{ position: relative; display: inline-block; font-size: 68px; color:
rgba(0, 0, 0, 0.8); overflow: hidden; white-space: pre; transform:
rotate(4deg); text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3); }
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
display: block; z-index: 1; position: absolute; top: -0.5px; left: -3px;
width: 100%; content: attr(data-content); overflow: hidden;
pointer-events: none; color: #FFF; transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000; } /* end half-style hs-PeelingStyle */
/* start half-style hs-KevinGranger, by user KevinGranger on
StackOverflow.com*/ .textToHalfStyle.hs-KevinGranger { display:block;
margin: 200px 0 0 0; text-align:center; } .halfStyle.hs-KevinGranger {
font-family: ‘Libre Baskerville’, serif; position:relative;
display:inline-block; width:1; font-size:70px; color: black;
overflow:hidden; white-space: pre; text-shadow: 1px 2px 0 white; }
.halfStyle.hs-KevinGranger:before { display:block; z-index:1;
position:absolute; top:0; width: 50%; content: attr(data-content); /*
dynamic content for the pseudo element */ overflow:hidden; color:
white; } /* end half-style hs-KevinGranger

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* start half-style hs-base */
.halfStyle.hs-base {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow:hidden;
    color: #f00; /* for demo purposes */
}
/* end half-style hs-base */
 
/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent;
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
/* end half-style hs-horizontal-third */
 
/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
/* end half-style hs-PeelingStyle */
 
/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
 
.halfStyle.hs-KevinGranger {
    font-family: ‘Libre Baskerville’, serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle.hs-KevinGranger:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
/* end half-style hs-KevinGranger

HTML:

JavaScript

<p> <span class=”textToHalfStyle”
data-halfstyle=”hs-base”>Half-style, please.</span> </p>
<p> <span class=”textToHalfStyle”
data-halfstyle=”hs-horizontal-third”>Half-style, please.</span>
</p> <p> <span class=”textToHalfStyle”
data-halfstyle=”hs-PeelingStyle”>Half-style, please.</span>
</p> <p style=”background-color:#000;”> <span
class=”textToHalfStyle” data-halfstyle=”hs-KevinGranger”>Half-style,
please.</span> </p>

1
2
3
4
5
6
7
8
9
10
11
12
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

同一页面中多少个哈尔f-Styles的 演示

赞 收藏
评论

.rainbows .highlight {
color: #fff;
display:block;
position: absolute;
top: -2px;
left: 0px;
z-index: 4;
}

关于作者:Carman

美高梅开户网址 13

(搜狐新浪:@常见长剑)

个人主页 ·
小编的小说

美高梅开户网址 14

.rainbows .shadow {
color: #000;
display:block;
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
top: 2px;
left: 2px;
z-index: 3;
}

那边首要表达下highlight和shadow那三个class的意思,其实从字面也基本可以精晓,那七个class是为了充实字体的立体性而设定,三个是反革命的高亮,贰个是土褐阴影。

JS部分:

复制代码 代码如下:

function initGradients(s) { $(function() { $(s).each(function() { var el
= this; var from = $(el).attr(‘gradFromColor’)||’#ffffff’, to =
$(el).attr(‘gradToColor’)||’#美高梅开户网址 ,000000′; var fR =
parseInt(from.substring(1, 3), 16), fG = parseInt(from.substring(3, 5),
16), fB = parseInt(from.substring(5, 7), 16), tR =
parseInt(to.substring(1, 3), 16), tG = parseInt(to.substring(3, 5), 16),
tB = parseInt(to.substring(5, 7), 16); var h = $(this).height() * 1.5;
var html,cacheHTML=[]; this.initHTML = html =
this.initHTML||this.innerHTML; this.innerHTML = ”; for (var i = 0; i
< h; i++) { var c = ‘#’ + (Math.floor(fR * (h – i) / h + tR * (i /
h))).toString(16) + (Math.floor(fG * (h – i) / h + tG * (i /
h))).toString(16) + (Math.floor(fB * (h – i) / h + tB * (i /
h))).toString(16); cacheHTML.push(‘<span class=”rainbow rainbow-‘ + i

  • ‘” style=”color: ‘ + c + ‘;”><span style=”top: ‘ + ( – i – 1) +
    ‘px;”>’ + html + ‘</span></span>’) }
    cacheHTML.push(‘<span class=”highlight”>’ + html +
    ‘</span>’,'<span class=”shadow”>’ + html + ‘</span>’);
    $(cacheHTML.join(”)).appendTo(this) }) }) }
    //这么些局地就是调用了,传入要添加效果的因素,那里能够是jquery的轻易拔取符。
    initGradients(‘.rainbows’); function initGradients(s) {
    $(function() {
    $(s).each(function() {
    var el = this;
    var from = $(el).attr(‘gradFromColor’)||’#ffffff’, to =
    $(el).attr(‘gradToColor’)||’#000000′;
    var fR = parseInt(from.substring(1, 3), 16),
    fG = parseInt(from.substring(3, 5), 16),
    fB = parseInt(from.substring(5, 7), 16),
    tR = parseInt(to.substring(1, 3), 16),
    tG = parseInt(to.substring(3, 5), 16),
    tB = parseInt(to.substring(5, 7), 16);

var h = $(this).height() * 1.5;
var html,cacheHTML=[];
this.initHTML = html = this.initHTML||this.innerHTML;
this.innerHTML = ”;
for (var i = 0; i < h; i++) {
var c = ‘#’ + (Math.floor(fR * (h – i) / h + tR * (i /
h))).toString(16) + (Math.floor(fG * (h – i) / h + tG * (i /
h))).toString(16) + (Math.floor(fB * (h – i) / h + tB * (i /
h))).toString(16);
cacheHTML.push(‘<span class=”rainbow rainbow-‘ + i + ‘” style=”color:
‘ + c + ‘;”><span style=”top: ‘ + ( – i – 1) + ‘px;”>’ + html +
‘</span></span>’)
}
cacheHTML.push(‘<span class=”highlight”>’ + html +
‘</span>’,'<span class=”shadow”>’ + html +
‘</span>’);
$(cacheHTML.join(”)).appendTo(this)
})
})
}
//这么些局地就是调用了,传入要添加效果的成分,这里可以是jquery的肆意采取符。
initGradients(‘.rainbows’);

代码看起来并不算多,但是一旦想清楚原理的话依然要认真的知道下这几个代码的。

整合JS/CSS大家得以见见其大体的笔触如下:

先后首先算出字体所在容器的高度N,然后清空容器内容,并添加N个span,每一种span内容都为原容器的文字,每一种span的水彩依据渐变色举行计算,而且其中的文字定位都相比较以前二个span的文字向上偏移3个像素。CSS中可以看看,每种span的可观都为1。那样,大家就透过N各不相同颜色的1px的span把字体“拼”出来了,然后加上“高光/阴影”就解决。

依据jQuery的立体文字渐变效果

效果很正确啊?会不会误以为那么些字体是图形?那可不是图片,而是用JS完成的
在线演示 …

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图