• 欢迎访问雨丝林森网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏雨丝林森吧
  • 本站所有资料来源于网络,免费分享下载,请下载后自行杀毒与测试,请保留好开发者的相关版权信息

一种H5和CSS3实现文字的动态效果显示,你肯定喜欢

其它技术 一 树 3年前 (2018-01-21) 292次浏览 已收录 0个评论 扫描二维码

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;  
    }  

其中,内容跟博客内容修改成一样的内容.


雨丝林森, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一种H5和CSS3实现文字的动态效果显示,你肯定喜欢
喜欢 (0)
[zgcf2008@163.com]
分享 (0)

您必须 登录 才能发表评论!