文本/链接

纯CSS3带阴影效果的剪纸文字动画特效

创客主机

纯CSS3带阴影效果的剪纸文字动画特效-创客云
这是一款效果非常炫酷的纯 CSS3 带阴影效果的剪纸文字动画特效。它利用伪元素来制作文字脱离屏幕的剪纸效果,并在伪元素上执行旋转和缩放,使其在鼠标滑过是产生关门的动画特效。

HTML 结构

该剪纸文字动画的 HTML 结构是在<p>元素里放置一组<span>元素,每一个元素是一个字母。其中 data-text 用于制作伪元素的内容,即向外凸出的文字。

也想出现在这里?联系我们
宝塔
  1. <p aria-label="PeeledText">
  2.   <span data-text="J">J</span>
  3.   <span data-text="Q">Q</span>
  4.   <span data-text="U">U</span>
  5.   <span data-text="E">E</span>
  6.   <span data-text="R">R</span>
  7.   <span data-text="Y">Y</span>
  8.   <span data-text="之"></span>
  9.   <span data-text="家"></span>
  10. </p>

CSS 样式

为了制作 3D 效果,段落中的 span 元素都设置了 perspective 属性。并将 transform-style 属性设置为 preserve-3d。因为 IE 浏览器不支持这个属性,所以在鼠标滑过文字时不会有动画效果。

  1. p span {
  2.   display: inline-block;
  3.   position: relative;
  4.   -webkit-transform-style: preserve-3d;
  5.           transform-style: preserve-3d;
  6.   -webkit-perspective: 500;
  7.           perspective: 500;
  8.   -webkit-font-smoothing: antialiased;
  9. }

然后设置 span 元素的:before 和:after 伪元素的内容为 data-text 属性中的内容,并修改它们的转换原点,以及设置动画过渡效果。

  1. p span::before,
  2. p span::after {
  3.   display: none;
  4.   position: absolute;
  5.   top: 0;
  6.   left: -1px;
  7.   -webkit-transform-origin: left top;
  8.       -ms-transform-origin: left top;
  9.           transform-origin: left top;
  10.   -webkit-transition: all ease-out 0.3s;
  11.           transition: all ease-out 0.3s;
  12.   content: attr(data-text);
  13. }

span 元素的:before 伪元素用于制作文字的阴影效果。

  1. p span::before {
  2.   z-index: 1;
  3.   color: rgba(0,0,0,0.2);
  4.   -webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
  5.       -ms-transform: scale(1.1, 1) skew(0deg, 20deg);
  6.           transform: scale(1.1, 1) skew(0deg, 20deg);
  7. }

span 元素的:after 伪元素用于制作剪纸文字,它使用 rotateY 函数旋转了-40 度,形成向外凸出的效果。

  1. p span:hover::before {
  2.   -webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
  3.       -ms-transform: scale(1.1, 1) skew(0deg, 5deg);
  4.           transform: scale(1.1, 1) skew(0deg, 5deg);
  5. }

最后在鼠标滑过 span 元素的时候,分别修改:before 和:after 伪元素的 transform 属性,使其产生关门的效果。

  1. p span:hover::after {
  2.   -webkit-transform: rotateY(-10deg);
  3.           transform: rotateY(-10deg);
  4. }
  5. p span + span {
  6.   margin-left: 0.3em;
  7. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!