文字效果:一种H5和CSS3实现文字的动态效果显示

这是一个不错的文字动态效果,闲鱼感觉蛮好看的,用作标题也很不错,也是闲鱼在浏览吴乾坤博客看到的,以后有机会闲鱼也可以在某些地方用上。

HTML部分

  1. <!doctype html>  
  2. <html lang="zh" class="no-js">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7. <title>鼠标滑过文字特效显示</title>  
  8. <link rel="stylesheet" type="text/css" href="huawei.css" />  
  9. </head>  
  10. <body>  
  11. </body>  
  12. </html>  

内容部分

  1. <div class="huawei">  
  2. <a class="link link-huawei" href="#" data-letters="闲鱼博客">闲鱼博客</a>  
  3. </div>  

css部分

  1. .huawei{  
  2. margin: 0 auto;  
  3. overflowhidden;  
  4. height: calc(100vh - 40px);  
  5. min-height460px;  
  6. max-width: calc(100vw - 40px);  
  7. background#ff5e53;  
  8. padding100px 0;  
  9. z-index: 1;  
  10. positionrelative;  
  11. text-aligncenter;  
  12. display: -webkit-flex;  
  13. display: flex;  
  14. -webkit-align-items: center;  
  15. align-items: center;  
  16. -webkit-justify-contentcenter;  
  17. justify-contentcenter;  
  18. -webkit-transform: translate3d(0,0,0);   
  19. }  
  20. .link {  
  21. outlinenone;  
  22. text-decorationnone;  
  23. positionrelative;  
  24. font-size: 8em;  
  25. line-height: 1;  
  26. displayinline-block;  
  27. }  
  28. .link-huawei {  
  29. text-transformuppercase;  
  30. font-weight: 900;  
  31. overflowhidden;  
  32. line-height: 0.75;  
  33. color#D3D3D3;  
  34. }  

演示效果

挂了

本文最后更新于2016年9月9日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  5   博主  3

    • 明月登楼的博客

      其实我对H5很感兴趣的!

      • Koolight

        预览效果网站被关闭了,看不到了。

          • 闲鱼 【博主】

            @Koolight :?: 丢在主机屋的垃圾空间,忘了

          • 憧憬Licoy

            更换LOGO了,样式不错

              • 闲鱼 【博主】

                @憧憬Licoy 看得疲劳了就弄了一个 :roll:

                  • 憧憬Licoy

                    @闲鱼 技术好就是66

                • BanYuner

                  效果不错 现在并不是喜欢这些了 以前可能会折腾一下吧