js Clip的奇思妙想之文字拼接效果

站长资源 2026/7/16 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

那么有人就问了，什么CSS做的效果既奇妙又实用的呢？Clip，对，就是css里的clip属性，被多数人忽略的属性：

语法：
clip : auto | rect ( number number number number )

参数：
auto : 　对象无剪切
rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

需要注意的是
1.clip属性一定要和position:absolute配合使用。
2.裁切参考点始终是左上角，这点和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我们可以使用clip实现各种元素的裁切和拼接。
经典的文字拼接实现，多彩文字效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>clip多彩文字</title> <style type="text/css"> body{background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0;} p{margin: 0; } #top{ min-height: 90%; overflow: auto; } #footer{ height: 10%; background: #CC0000; color: #FFFFFF;} a{ text-decoration: none;} .textBottom { color: #a90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(18px auto auto auto);} .textTop { color: #f90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(0 auto 18px 0);} .container { width: 28em; height: 5em; margin: 1em auto; position: relative; background: #F6F6F6;text-align:center} .textTop:hover { color: #a90;} .textBottom:hover { color: #f90;} </style> </head> <body>   Clip奇思妙想  <p>文字的上半部分</p>  Clip奇思妙想  <p>文字的下半部分</p>  Clip奇思妙想 Clip奇思妙想  <p>二组文字重合的效果</p>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
这个是竖着拼接，我们也可以横向拼接，多写一些的话可以实现渐变色，炫啊！

js,Clip,文字拼接

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“js Clip的奇思妙想之文字拼接效果”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2026年07月16日

js Clip的奇思妙想之文字拼接效果

js Clip奇思妙想之多彩渐变字效果

ajax无刷新动态调用股票信息(改良版)

评论“js Clip的奇思妙想之文字拼接效果”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接