这是一个不错的文字动态效果,闲鱼感觉蛮好看的,用作标题也很不错,也是闲鱼在浏览吴乾坤博客看到的,以后有机会闲鱼也可以在某些地方用上。
HTML部分
- <!doctype html>
- <html lang="zh" class="no-js">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>鼠标滑过文字特效显示</title>
- <link rel="stylesheet" type="text/css" href="huawei.css" />
- </head>
- <body>
- </body>
- </html>
内容部分
- <div class="huawei">
- <a class="link link-huawei" href="#" data-letters="闲鱼博客">闲鱼博客</a>
- </div>
css部分
- .huawei{
- margin: 0 auto;
- overflow: hidden;
- height: calc(100vh - 40px);
- min-height: 460px;
- max-width: calc(100vw - 40px);
- background: #ff5e53;
- padding: 100px 0;
- z-index: 1;
- position: relative;
- text-align: center;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-transform: translate3d(0,0,0);
- }
- .link {
- outline: none;
- text-decoration: none;
- position: relative;
- font-size: 8em;
- line-height: 1;
- display: inline-block;
- }
- .link-huawei {
- text-transform: uppercase;
- font-weight: 900;
- overflow: hidden;
- line-height: 0.75;
- color: #D3D3D3;
- }
演示效果
挂了
本文最后更新于2016年9月9日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
- 博客公众号
- 关注本博客公众号
-
- 博客小程序
- 关注本博客小程序
-
2016年12月17日 下午10:23 4楼
其实我对H5很感兴趣的!
2016年10月28日 下午9:09 地板
预览效果网站被关闭了,看不到了。
2016年10月28日 下午9:24 1层
@Koolight
丢在主机屋的垃圾空间,忘了
2016年9月12日 下午1:17 板凳
更换LOGO了,样式不错
2016年9月12日 下午3:44 1层
@憧憬Licoy 看得疲劳了就弄了一个
2016年9月12日 下午3:44 2层
@闲鱼 技术好就是66
2016年9月10日 下午3:09 沙发
效果不错 现在并不是喜欢这些了 以前可能会折腾一下吧
2016年9月12日 下午3:43 1层
@BanYuner
看到了就收集一下