js Clip的奇思妙想之文字拼接效果
更新時間：2008年11月02日 00:14:09 作者：
CSS的確是很強大，很奇妙。很多愛好者時?？梢杂肅SS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說到底還只是一些不實用的東西。過濾之，過濾之……
那么有人就問了，什么CSS做的效果既奇妙又實用的呢？Clip，對，就是css里的clip屬性，被多數(shù)人忽略的屬性：
語法：
clip : auto | rect ( number number number number )
參數(shù)：
auto : 對象無剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切 。
需要注意的是
1.clip屬性一定要和position:absolute配合使用。
2.裁切參考點始終是左上角，這點和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我們可以使用clip實現(xiàn)各種元素的裁切和拼接。
經(jīng)典的文字拼接實現(xiàn)，多彩文字效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個是豎著拼接，我們也可以橫向拼接，多寫一些的話可以實現(xiàn)漸變色，炫啊！
語法：
clip : auto | rect ( number number number number )
參數(shù)：
auto : 對象無剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切 。
需要注意的是
1.clip屬性一定要和position:absolute配合使用。
2.裁切參考點始終是左上角，這點和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我們可以使用clip實現(xiàn)各種元素的裁切和拼接。
經(jīng)典的文字拼接實現(xiàn)，多彩文字效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個是豎著拼接，我們也可以橫向拼接，多寫一些的話可以實現(xiàn)漸變色，炫啊！
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)瀑布動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JS值當前DIV的ID值的代碼...2007-05-05
這篇文章主要為大家詳細介紹了易被忽視的js事件問題，包括跨平臺事件、冒泡中target和currentTarget的區(qū)別，感興趣的朋友可以參考一下2016-05-05
下面小編就為大家?guī)硪黄猨s瀏覽器滾動條卷去的高度scrolltop(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
BootStrap中的模態(tài)框（modal，彈出層）功能示例代碼
bootstrap中的模態(tài)框（modal），不同于Tooltips，模態(tài)框以彈出對話框的形式出現(xiàn)，具有最小和最實用的功能集。這篇文章主要介紹了BootStrap中的模態(tài)框（modal，彈出層）,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了JS實現(xiàn)加載和讀取XML文件的方法,結合實例形式分析了javascript針對xml文件的加載與讀取相關實現(xiàn)步驟與操作技巧,需要的朋友可以參考下2017-04-04
uniapp項目使用防抖及節(jié)流的方案實戰(zhàn)
防抖就是指觸發(fā)事件后把觸發(fā)非常頻繁的事件合并成一次去執(zhí)行,節(jié)流是指頻繁觸發(fā)事件時只會在指定的時間段內(nèi)執(zhí)行事件回調(diào),即觸發(fā)事件間隔大于等于指定的時間才會執(zhí)行回調(diào)函數(shù),這篇文章主要給大家介紹了關于uniapp項目使用防抖及節(jié)流的相關資料,需要的朋友可以參考下2023-01-01
某些網(wǎng)站，尤其是涉及錢的網(wǎng)站，現(xiàn)在基本都有一個機制是兩小時后登陸自動失效，要重新登陸確認身份，那么js關閉瀏覽器時退出賬號如何實現(xiàn)，感興趣的可以了解一下2021-12-12
本篇文章實例演示了Javascript的面向對象--接口的用法。希望對大家有所幫助，下面就隨小編一起來看看吧2016-12-12