文本/链接
纯CSS3带阴影效果的剪纸文字动画特效
PetitQ
这是一款效果非常炫酷的纯 CSS3 带阴影效果的剪纸文字动画特效。它利用伪元素来制作文字脱离屏幕的剪纸效果，并在伪元素上执行旋转和缩放，使其在鼠标滑过是产生关门的动画特效。
HTML 结构
该剪纸文字动画的 HTML 结构是在<p>元素里放置一组<span>元素，每一个元素是一个字母。其中 data-text 用于制作伪元素的内容，即向外凸出的文字。
也想出现在这里？联系我们吧
<p aria-label="PeeledText">
<span data-text="J">J</span>
<span data-text="Q">Q</span>
<span data-text="U">U</span>
<span data-text="E">E</span>
<span data-text="R">R</span>
<span data-text="Y">Y</span>
<span data-text="之">之</span>
<span data-text="家">家</span>
</p>
CSS 样式
为了制作 3D 效果，段落中的 span 元素都设置了 perspective 属性。并将 transform-style 属性设置为 preserve-3d。因为 IE 浏览器不支持这个属性，所以在鼠标滑过文字时不会有动画效果。
p span {display: inline-block;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500;
perspective: 500;
-webkit-font-smoothing: antialiased;
}
然后设置 span 元素的:before 和:after 伪元素的内容为 data-text 属性中的内容，并修改它们的转换原点，以及设置动画过渡效果。
p span::before,
p span::after {
display: none;
position: absolute;
top: 0;
left: -1px;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transition: all ease-out 0.3s;
transition: all ease-out 0.3s;
content: attr(data-text);
}
span 元素的:before 伪元素用于制作文字的阴影效果。
p span::before {
z-index: 1;
color: rgba(0,0,0,0.2);
-webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
-ms-transform: scale(1.1, 1) skew(0deg, 20deg);
transform: scale(1.1, 1) skew(0deg, 20deg);
}
span 元素的:after 伪元素用于制作剪纸文字，它使用 rotateY 函数旋转了-40 度，形成向外凸出的效果。
p span:hover::before {
-webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
-ms-transform: scale(1.1, 1) skew(0deg, 5deg);
transform: scale(1.1, 1) skew(0deg, 5deg);
}
最后在鼠标滑过 span 元素的时候，分别修改:before 和:after 伪元素的 transform 属性，使其产生关门的效果。
p span:hover::after {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}p span + span {
margin-left: 0.3em;
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
