文本/链接

纯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织梦模板

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