欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > css3库 > CSS3 animation > 纯CSS3带阴影效果的剪纸文字动画特效

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

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

关键词:纯css3,文字特效,阴影,文字动画,剪纸文字,文字动画.文字特效,伪元素动画,关门特效,css3库,css3animation

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

简要教程

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

使用方法

HTML结构

该剪纸文字动画的HTML结构是在<p>元素里放置一组<span>元素,每一个<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;
}                
              

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/css3_css3animation/7907.html

 在线演示  免费下载
编号:201802080000007907
大小:0.01MB
上传时间:2018-02-12 09:02
素材由用户"duaixinyu1992"上传分享。

标签

最新推荐素材

与纯CSS3带阴影效果的剪纸文字动画特效相关的素材

.