本文分享一款很酷的HTML5电子书翻页动画特效,禁

作者: 前端  发布:2019-11-09

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

很酷的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;*/  
  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翻页动画可以用鼠标拖动页面来模拟手动翻页的效...

图片 2

第三部分:混合-匹配和改进

现在我们知道什么是可能的,让我们来添加一些花样。


代码看起来并不算多,但是如果想明白原理的话还是要认真的理解下这个代码的。

-水平一半

图片 3

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 */
}


先截两个图看看:

第一部分: 基本解决方案

图片 4

演示: 


这种方法用于任何动态文本或单个字符,并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class,剩下的就解决了。

同时,保留了原文的可访问性,可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素,你可以添加一个data属性,比如data-content=”X”,并且在伪元素上使用content:attr(data-content);这样,.halfStyle:before class将会是动态的,你不需要为每个实例进行硬编码

任意文本的实现

只需添加textToHalfStyle 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);
    });
});

演示: 


为了便于代码重用,我们通过class来标识出哪些文字需要增加这个特效,这里用的是rainbows。

来自 Arbel 的最佳回答:(1280+ 赞)

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

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

2014/06/13 · CSS · CSS

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

基于jQuery的立体文字渐变效果

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;
}


图片 5

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


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

复制代码 代码如下:

第四部分:准备生产

定制不同的Half-Style样式集可以用在同一个页面的所需元素上。你可以定义多个样式集并告诉插件要用哪一个。

插件在目标.textToHalfStyle元素上使用data属性data-halfstyle=”[-CustomClassName-]”,所有都会自动改变。

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

图片 6

相同页面中多个Half-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>

相同页面中多个Half-Styles的 演示

赞 收藏 评论

  • '" 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);

第二部分:先进的解决方案-独立的左边和右边

图片 7

使用这种方法你可以分别单独的渲染左边和右边部分。

一切都是相同的,只是更高级的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代码:

关于作者:Carman

图片 8

(新浪微博:@常见长剑) 个人主页 · 我的文章

图片 9

.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;
}

-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;
}


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');

Mathew MacLean 提问

我正在寻找:

一种方法为半个字符应用样式(在这种情况下,一半的字母是透明的)。

我目前已经搜索并尝试的(不走运)

  • 渲染一半字符/字母的方法
  • 用CSS或JavaScript渲染字符的一部分
  • 对一个字符的50%应用CSS

以下是我尝试实现的一个例子:

图片 11

这个是否有一个CSS或者JavaScript的解决方法存在,还是我必须采用图片的方法?我不愿意采用图片的方法,因为文本将最终是动态生成的。

 

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

-垂直1/3

图片 12

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 */
}


在线演示

-水平 1/3

图片 13

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 */
}


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

 -PeelingStyle 改进的 HalfStyle @SamTremaine

图片 14

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

CSS代码:

结合JS/CSS我们可以看出其大概的思路如下:

下面来简单分享下实现过程及原理(网站中使用了jquery这个lib,我们这里就不再自己单独实现了,我们这里分享的也是jquery的实现方法):

复制代码 代码如下:

程序首先算出字体所在容器的高度N,然后清空容器内容,并添加N个span,每个span内容都为原容器的文字,每个span的颜色根据渐变色进行计算,而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到,每个span的高度都为1。这样,我们就通过N各不同颜色的1px的span把字体“拼”出来了,然后加上“高光/阴影”就搞定。

效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的 在线演示 ...

JS部分:

.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实现的

本文由9159.com发布于前端,转载请注明出处:本文分享一款很酷的HTML5电子书翻页动画特效,禁

关键词:

上一篇:没有了
下一篇:没有了