• 简单做出HTML5翻页效果文字特效


    之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页。于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴、Y轴、Z轴进行翻转,先看一下效果截图。

    Z.jpg

     

     

           看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转。       

    DEMO演示效果


           接下来我们来看一下源码。首先是HTML代码,非常简单,列出我们需要渲染的文字:

    1. <div class="foo">
    2.   <span class="letter" data-letter="A">A</span>
    3.   <span class="letter" data-letter="B">B</span>
    4.   <span class="letter" data-letter="C">C</span>
    5.   <span class="letter" data-letter="D">D</span>
    6.   <span class="letter" data-letter="E">E</span>
    7.   <span class="letter" data-letter="F">F</span>
    8.   <span class="letter" data-letter="G">G</span>
    9.   <span class="letter" data-letter="H">H</span>
    10.   <span class="letter" data-letter="I">I</span>
    11.   <span class="letter" data-letter="L">L</span>
    12.   <span class="letter" data-letter="M">M</span>
    13.   <span class="letter" data-letter="N">N</span>
    14.   <span class="letter" data-letter="O">O</span>
    15.   <span class="letter" data-letter="P">P</span>
    16.   <span class="letter" data-letter="Q">Q</span>
    17.   <span class="letter" data-letter="R">R</span>
    18.   <span class="letter" data-letter="S">S</span>
    19.   <span class="letter" data-letter="T">T</span>
    20.   <span class="letter" data-letter="U">U</span>
    21.   <span class="letter" data-letter="V">V</span>
    22.   <span class="letter" data-letter="Z">Z</span>
    23. </div>
    复制代码

             
          接下来是核心CSS3代码,这里我们略去了控制页面样式的CSS代码,把实现翻页效果文字的CSS代码提取出来。

    1. .letter{
    2.   display: inline-block;
    3.   font-weight: 900;
    4.   font-size: 8em;
    5.   margin: 0.2em;
    6.   position: relative;
    7.   color: #00B4F1;
    8.   transform-style: preserve-3d;
    9.   perspective: 400;
    10.   z-index: 1;
    11. }
    复制代码


          这样我们就让这些字母安安静静的排列起来,并有了自己的背景颜色,等待强大的CSS3来渲染。

          接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。

    1. .letter:before, .letter:after{
    2.   position:absolute;
    3.   content: attr(data-letter);
    4.   transform-origin: top left;
    5.   top:0;
    6.   left:0;
    7. }
    8. .letter, .letter:before, .letter:after{
    9.   transition: all 0.3s ease-in-out;
    10. }
    11. .letter:before{
    12.   color: #fff;
    13.   text-shadow:
    14.     -1px 0px 1px rgba(255,255,255,.8),
    15.     1px 0px 1px rgba(0,0,0,.8);
    16.   z-index: 3;
    17.   transform:
    18.     rotateX(0deg)
    19.     rotateY(-15deg)
    20.     rotateZ(0deg);
    21. }
    22. .letter:after{
    23.   color: rgba(0,0,0,.11);
    24.   z-index:2;
    25.   transform:
    26.     scale(1.08,1)
    27.     rotateX(0deg)
    28.     rotateY(0deg)
    29.     rotateZ(0deg)
    30.     skew(0deg,1deg);
    31. }
    32. .letter:hover:before{
    33.   color: #fafafa;
    34.   transform:
    35.     rotateX(0deg)
    36.     rotateY(-40deg)
    37.     rotateZ(0deg);
    38. }
    39. .letter:hover:after{
    40.   transform:
    41.     scale(1.08,1)
    42.     rotateX(0deg)
    43.     rotateY(40deg)
    44.     rotateZ(0deg)
    45.     skew(0deg,22deg);
    46. }
    47. 复制代码
    复制代码


            这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母,然后利用transform属性的rotateX,rotateY,rotateZ来翻转,再利用skew来时文字倾斜。

  • 相关阅读:
    iframe上下传递对象方法
    Chrome Console 基本调试方法
    javascript 获取div长度和宽度
    Python with语句用法
    KVM -> 虚拟机在线热添加技术_04
    查看系统日志的实用操作
    2018-11-3& maven
    Gitlab & Github
    Git详解
    Jenkins与代码上线解决方案
  • 原文地址:https://www.cnblogs.com/ha-ck/p/5497798.html
Copyright © 2020-2023  润新知