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

最后更新时间：2016-09-09

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

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. overflow: hidden;  
  4. height: calc(100vh - 40px);  
  5. min-height: 460px;  
  6. max-width: calc(100vw - 40px);  
  7. background: #ff5e53;  
  8. padding: 100px 0;  
  9. z-index: 1;  
  10. position: relative;  
  11. text-align: center;  
  12. display: -webkit-flex;  
  13. display: flex;  
  14. -webkit-align-items: center;  
  15. align-items: center;  
  16. -webkit-justify-content: center;  
  17. justify-content: center;  
  18. -webkit-transform: translate3d(0,0,0);   
  19. }  
  20. .link {  
  21. outline: none;  
  22. text-decoration: none;  
  23. position: relative;  
  24. font-size: 8em;  
  25. line-height: 1;  
  26. display: inline-block;  
  27. }  
  28. .link-huawei {  
  29. text-transform: uppercase;  
  30. font-weight: 900;  
  31. overflow: hidden;  
  32. line-height: 0.75;  
  33. color: #D3D3D3;  
  34. }  

演示效果

挂了

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

墙裂推荐本站使用的阿里云服务器  去试试>>

1核2G，100%CPU性能，114/年  丨  1核2G，100%CPU性能，118/年

发表评论

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

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

    • 明月登楼的博客
      回复 2016年12月17日 下午10:23  4楼

      其实我对H5很感兴趣的！

      • Koolight
        回复 2016年10月28日 下午9:09  地板

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

          • 闲鱼 【博主】
            回复 2016年10月28日 下午9:24  1层

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

          • 憧憬Licoy
            回复 2016年9月12日 下午1:17  板凳

            更换LOGO了，样式不错

              • 闲鱼 【博主】
                回复 2016年9月12日 下午3:44  1层

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

                  • 憧憬Licoy
                    回复 2016年9月12日 下午3:44  2层

                    @闲鱼 技术好就是66

                • BanYuner
                  回复 2016年9月10日 下午3:09  沙发

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