翻页文字特效

快来打我* 2021-12-24 00:23 356阅读 0赞

@import url(https://fonts.googleapis.com/css?family=Lato:900);
    *, *:before, *:after{
      box-sizing:border-box;
    }
    body{
      font-family: 'Lato', sans-serif;
    }
    div.foo{
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }
    .letter{
      display: inline-block;
      font-weight: 900;
      font-size: 8em;
      margin: 0.2em;
      position: relative;
      color: #00B4F1;
      transform-style: preserve-3d;
      perspective: 400;
      z-index: 1;
    }
    .letter:before, .letter:after{
      position:absolute;
      content: attr(data-letter);
      transform-origin: top left;
      top:0;
      left:0;
    }
    .letter, .letter:before, .letter:after{
      transition: all 0.3s ease-in-out;
    }
    .letter:before{
      color: #fff;
      text-shadow: 
        -1px 0px 1px rgba(255,255,255,.8),
        1px 0px 1px rgba(0,0,0,.8);
      z-index: 3;
      transform:
        rotateX(0deg)
        rotateY(-15deg)
        rotateZ(0deg);
    }
    .letter:after{
      color: rgba(0,0,0,.11);
      z-index:2;
      transform:
        scale(1.08,1)
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        skew(0deg,1deg);
    }
    .letter:hover:before{
      color: #fafafa;
      transform:
        rotateX(0deg)
        rotateY(-40deg)
        rotateZ(0deg);
    }
    .letter:hover:after{
      transform:
        scale(1.08,1)
        rotateX(0deg)
        rotateY(40deg)
        rotateZ(0deg)
        skew(0deg,22deg);
    }
    
    <div class="foo">
      <span class="letter" data-letter="A">A</span>
      <span class="letter" data-letter="B">B</span>
      <span class="letter" data-letter="C">C</span>
    </div>

转载于:https://www.cnblogs.com/candy-Yao/p/7400572.html

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关高级控件——翻页类视图——翻页标签栏PagerTabStrip

![8b16ad8b9dfa01ed841eebf7cf976168.png][] ![5115f9c8b0043f4563c6e89c2971c43a.png][]

- 日理万妓/ 2023年09月28日 15:34/ 0 赞/ 129 阅读

相关高级控件——翻页类视图——翻页视图ViewPager

![781066c843d79f25e8cddbd47c24eb35.png][] ![be05d0b9272e69be0afc482938dea585.png][] ![

迷南。/ 2023年09月28日 15:33/ 0 赞/ 128 阅读

相关 CSS 知识碎片[二] CSS3 3d 特效翻页 & 立方体效果

> 业精于勤荒于嬉今天今天今天，读完了本月的第三本书，书中自有黄金屋一点都没错了。开始一件事情最好的时机是十年前，其次是现在。今天来写一个css3 的3d 特效。

左手的ㄟ右手/ 2022年12月27日 08:41/ 0 赞/ 248 阅读

相关 113.文字肖像特效

效果 (源码网盘地址在最后) ![177358b45288a8f39fadeda01bb694c9.png][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

客官°小女子只卖身不卖艺/ 2022年12月26日 11:17/ 0 赞/ 121 阅读

相关整页翻屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

约定不等于承诺〃/ 2022年05月31日 07:26/ 0 赞/ 230 阅读

相关 css翻页技巧

<!DOCTYPE html> <html> <head> <meta charset="gb-2312">

深藏阁楼爱情的钟/ 2022年05月23日 12:19/ 0 赞/ 254 阅读

相关 vim 翻页命令

整页翻页 ctrl-f：向下翻一页 f含义：forword ctrl-b：向上翻一页 b含义：backward 翻半页 ctrl-d：向下翻半页

偏执的太偏执、/ 2022年01月07日 08:15/ 0 赞/ 343 阅读

相关翻页文字特效

@import url(https://fonts.googleapis.com/css?family=Lato:900); , :before, :after

快来打我*/ 2021年12月24日 00:23/ 0 赞/ 357 阅读

相关翻页

package mb.utils; import java.util.ArrayList; import java.util.List;

短命女/ 2021年09月23日 06:22/ 0 赞/ 461 阅读

相关 Bootstrap之翻页

Bootstrap之翻页。 > 优点： > > 1. 支持局部刷新； > 2. 只要是列表，都可以加载该组件； > 3. 支持动态数据绑定； > 4. 当然还有绝对

电玩女神/ 2021年09月10日 15:24/ 0 赞/ 454 阅读