文字折叠效果 CSS

文字折叠效果

人的志向通常和他们的能力成正比例。——约翰逊

实现效果

实现思路

建一个div盒子让其旋转一定角度，使其有一定的倾斜效果

通过双伪元素建两个相同的样式，通过clip-path属性分别截取上半部分和下半部分，并定位使其与原div盒子层叠

添加鼠标移入效果，通过一定的旋转和倾斜来实现折叠时的效果

实现原理

一个div盒子在底层不动，让伪元素变化从而达到效果

clip-path:使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

该属性下有很多的属性值，这里用到的inset

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

-webkit-text-stroke:给文字添加边框，2个属性值，颜色和大小，ie有兼容性问题

skew:定义了一个元素在二维平面上的倾斜转换，这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

实现代码

部分内容截自MDN文档

本次的分享就到这结束了

CSS HTML JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。