zoukankan      html  css  js  c++  java
  • 简单做出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来时文字倾斜。

  • 相关阅读:
    Flutter form 的表单 input
    FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮
    Flutter 中的常见的按钮组件 以及自 定义按钮组件
    Drawer 侧边栏、以及侧边栏内 容布局
    AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换 通过TabController 定义TabBar
    清空路由 路由替换 返回到根路由
    应对ubuntu linux图形界面卡住的方法
    [转] 一块赚零花钱
    [转]在树莓派上搭建LAMP服务
    ssh保持连接
  • 原文地址:https://www.cnblogs.com/ha-ck/p/5497798.html
Copyright © 2011-2022 走看看