這篇文章帶大家了解一下3d文字效果的實現原理,沒有考慮程式碼的複用性和可移植性,有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
為了簡化運算,我們使用和上一篇文章《純CSS3文字效果推薦》一樣的文檔結構,後面的效果大差小不差,也就不再列出。
<div contenteditable="true" class="text effect01">前端开发whqet</div>
css裡面還是先來全域的設置,依然和上一篇文章大差小不差,不過為了避免視覺疲勞,我們修改了背景顏色和文字顏色。
body{ background-color: #666; } @import url(http://fonts.googleapis.com/css?family=Dosis:500,800); .text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative; }
然後是簡單單純的效果一的核心代碼
/*简单单纯的效果一*/ .effect01{ background-color: #7ABCFF; color:#FFD300; text-shadow: 0px 0px 0 #b89800, 1px -1px 0 #b39400, 2px -2px 0 #ad8f00, 3px -3px 0 #a88b00, 4px -4px 0 #a38700, 5px -5px 0 #9e8300, 6px -6px 0 #997f00, 7px -7px 0 #947a00, 8px -8px 0 #8f7600, 9px -9px 0 #8a7200, 10px -10px 0 #856e00, 11px -11px 0 #806a00, 12px -12px 0 #7a6500, 13px -13px 12px rgba(0, 0, 0, 0.55), 13px -13px 1px rgba(0, 0, 0, 0.5); }
從中我們可以看出,利用text-shadow實現立體效果的要素有三:
這種實現的方式雖說單純,但是可移植性不強、復用性差,試想一下,不同方向的立體字如何修改?不同顏色的立體字如何實現?逐字達到不同效果腫麼辦?如果需要動畫又如何?
接下來,透過逐步完善「單純」的效果一,我們來一一解答這些疑問。
童鞋們就說了,哥,變化呢,好像跟前面那個沒差別呀?大家又有耐心,看看程式碼就懂了。
我用sass寫了一個text 3d的mixin,利用這個mixin我們可以輕鬆控制,立體字的縱深感、方向感、錯落感。
/* 对“单纯”说不的效果二, sass实现的华丽转身 */ /** * 利用text-shadow实现3d文字效果 * * $color 立体字的初始颜色 * $dx 立体字水平偏移位置,dx>0,向右偏,建议取值[-2,2] * $dy 立体字垂直偏移位置,dy>0,向下偏,建议取值[-2,2],dx和dy配合控制立体字的方向 * $steps 立体字的层叠数量 * $darken 立体字的颜色变暗数值,建议取值[0,1],需要结合层叠数量,避免过多的黑色出现 * @copyright 前端开发whqet,http://blog.csdn.net/whqet */ @mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) { color:$color; $color:darken($color,30%); $output: ''; $x:0px; $y:0px; @for $n from 1 to $steps{ $output: $output + '#{$x} #{$y} 0 #{$color},'; $x:$x+$dx; $y:$y+$dy; $color:darken($color, $darken * ($n+10)); } $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);'; text-shadow:unquote($output); } .effect02{ @include text3d(#00d3ff,1,-1,15,.05); }
腫麼樣,大家仔細研究啦,利用sass實現的這個mixin,我們可以非常簡單的實作立體字,並且可以搞起來動畫,請看效果三。
有了效果二中的mixin,效果三就自然而然了。
/* “多动”效果三, 加上动画 */ .effect03{ animation:animateShadow 2s linear infinite; } @keyframes animateShadow{ 0% {@include text3d(#00d3ff,1,1,15,.05); } 25% {@include text3d(#00d3ff,-1,-1,15,.05); } 50% {@include text3d(#00d3ff,1,1,15,.05); } 75% {@include text3d(#00d3ff,-1.5,1.5,15,.05); } }
lettering. js是一個功能強大的jquery插件,可以把字串拆分,類似下面程式碼所示。
<div contenteditable="true" class="text effect04">前端开发whqet</div> <!-- 拆分成这样 --> <div contenteditable="true" class="text effect04"> <span class="char1">前</span> <span class="char2">端</span> <span class="char3">开</span> <span class="char4">发</span> <span class="char5">w</span> <span class="char6">h</span> <span class="char7">q</span> <span class="char8">e</span> <span class="char9">t</span> </div>
我們需要在頁面中匯入jquery.js和lettering.js,然後,我們就可以使用了。
<!-- 引入jquery,cdn方式 --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 引入lettering,cdn方式 --> <script src="//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script> <!-- 使用lettering --> <script> //JS is only used to keep the HTML markup clean $(".effect04").lettering(); </script>
然後,利用sass實現個人化控制, adjust-hue產生連續色相的顏色,@for迴圈實現遍歷。
/* 彰显“个性”的效果四,lettering.js实现逐字控制 */ .effect04{ letter-spacing:.1em; } $base:#FFD300; @for $i from 1 through 9 { .effect04 .char#{$i} { @include text3d(adjust-hue($base, $i *15deg),-1,1,10,.05) } }
/* “个性”升级的效果五,彩虹字 */ @for $i from 1 through 10 { .effect05 .char#{$i} { animation: rainbow 2s linear infinite; animation-delay: 0.1s * $i; } } $base2:#7E00FF; @keyframes rainbow { @for $i from 0 through 10 { #{$i* 10%} {@include text3d(adjust-hue($base2, $i *36deg), 1, 1, 10,.1); } } }
當然,不幸的是直到IE10,text-shadow才得到了比較完善的支持,那麼IE9-怎麼辦呢,尤其是在xp的狂熱愛好的中國。所幸IE自帶的濾鏡可以達到一樣的效果,所以就有了這個text-shadow polyfill,我們在這裡使用sass的方式來補丁text-shadow.
這樣的話針對ie9以下的瀏覽器,我們的text3d mixin要這樣修改
/** * 利用text-shadow实现3d文字效果 * * $color 立体字的初始颜色 * $dx 立体字水平偏移位置,dx>0,向右偏,建议取值[-2,2] * $dy 立体字垂直偏移位置,dy>0,向下偏,建议取值[-2,2],dx和dy配合控制立体字的方向 * $steps 立体字的层叠数量 * $darken 立体字的颜色变暗数值,建议取值[0,1],需要结合层叠数量,避免过多的黑色出现 * @copyright 前端开发whqet,http://blog.csdn.net/whqet */ @mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) { color:$color; $color:darken($color,30%); $output: ''; $x:0px; $y:0px; @for $n from 1 to $steps{ $output: $output + '#{$x} #{$y} 0 #{$color},'; $x:$x+$dx; $y:$y+$dy; $color:darken($color, $darken * ($n+10)); } $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);'; //for the mordern browser //text-shadow:unquote($output); //just for ie9-,这里做了修改 @include jquery-text-shadow(unquote($output)); }Enjoy it.##案例效果還是在codepen:
程式設計影片線上研究:http://codepen.io/whqet/pen/eGuqf
更多程式相關知識,請造訪:
以上是純CSS3實現3d立體文字效果(源碼分析)的詳細內容。更多資訊請關注PHP中文網其他相關文章!