Heim > Web-Frontend > js-Tutorial > js Clip的奇思妙想之文字拼接效果_javascript技巧

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

WBOY
Freigeben: 2016-05-16 18:59:04
Original
1298 Leute haben es durchsucht

那么有人就问了,什么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不同。
例:


我们可以使用clip实现各种元素的裁切和拼接。
经典的文字拼接实现,多彩文字效果:
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage