js Clip的奇思妙想之文字拼接效果
更新時(shí)間:2008年11月02日 00:14:09 作者:
CSS的確是很強(qiáng)大,很奇妙。很多愛好者時(shí)常可以用CSS做出一些讓人意想不到的效果,比如用CSS做的燈籠、用CSS畫的房子!然而這些東西酷歸酷,說到底還只是一些不實(shí)用的東西。過濾之,過濾之……
那么有人就問了,什么CSS做的效果既奇妙又實(shí)用的呢?Clip,對(duì),就是css里的clip屬性,被多數(shù)人忽略的屬性:
語法:
clip : auto | rect ( number number number number )
參數(shù):
auto : 對(duì)象無剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值,其中任一數(shù)值都可用auto替換,即此邊不剪切 。
需要注意的是
1.clip屬性一定要和position:absolute配合使用。
2.裁切參考點(diǎn)始終是左上角,這點(diǎn)和margin,padding不同。
例:
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我們可以使用clip實(shí)現(xiàn)各種元素的裁切和拼接。
經(jīng)典的文字拼接實(shí)現(xiàn),多彩文字效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)是豎著拼接,我們也可以橫向拼接,多寫一些的話可以實(shí)現(xiàn)漸變色,炫?。?
語法:
clip : auto | rect ( number number number number )
參數(shù):
auto : 對(duì)象無剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值,其中任一數(shù)值都可用auto替換,即此邊不剪切 。
需要注意的是
1.clip屬性一定要和position:absolute配合使用。
2.裁切參考點(diǎn)始終是左上角,這點(diǎn)和margin,padding不同。
例:
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我們可以使用clip實(shí)現(xiàn)各種元素的裁切和拼接。
經(jīng)典的文字拼接實(shí)現(xiàn),多彩文字效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)是豎著拼接,我們也可以橫向拼接,多寫一些的話可以實(shí)現(xiàn)漸變色,炫?。?
相關(guān)文章
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JS如何通過FileReader獲取.txt文件內(nèi)容
今天小編就為大家分享一篇JS如何通過FileReader獲取.txt文件內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-12-12JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)計(jì)算
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)的計(jì)算 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03利用了jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)互動(dòng)菜單
二級(jí)聯(lián)互動(dòng)菜單,利用了jquery的ajax實(shí)現(xiàn),具體實(shí)現(xiàn)如下,喜歡的朋友可以參考下2013-12-12JavaScript模運(yùn)算符理解及運(yùn)用實(shí)戰(zhàn)
這篇博客文章是為初級(jí)到中級(jí)JavaScript開發(fā)人員所寫,主要為大家介紹了JavaScript模運(yùn)算符理解及運(yùn)用實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-11-11Event altKey,ctrlKey,shiftKey屬性解析
本篇文章主要是對(duì)Event altKey,ctrlKey,shiftKey屬性解析了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12