A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 冬冬宋 中级黑马   /  2016-8-10 01:03  /  2206 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>HTML5颜色渐变3D文字特效DEMO演示</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <h1 class="text"><span>Gradient 3D text</span></h1>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>

</html>


////////////下面是对应的CSS样式
        body {
                background-color: #272727;
        }

        h1 {
                font-family: "Arial", sans-serif;
                font-size: 85px;
                text-align: center;
                font-weight: bold;
                color: #3d3d3d;
                margin-top: 200px;
        }

        .text {
                position:relative;
        }
        .text:after {
                content: '';
                position:absolute;
                display:block;
                top:0;
                left:0;
                height:100%;
                width:100%;
                background: -moz-linear-gradient(top,  rgba(39,39,39,1) 0%, rgba(39,39,39,0) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,39,39,1)), color-stop(100%,rgba(39,39,39,0)));
                background: -webkit-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
                background: -o-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
                background: -ms-linear-gradient(top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
                background: linear-gradient(to bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#00272727',GradientType=0 );

        }

        span {
                text-shadow:
                0 -1px 0 #858585,
               
               
                0 1px 10px rgba(0,0,0,.6),
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.2),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 7px 10px rgba(0,0,0,.25),
                0 15px 10px rgba(0,0,0,.2),
                0 25px 15px rgba(0,0,0,.15);
        }

4 个回复

倒序浏览
刚看过,可能比较适合做背景的东东。
回复 使用道具 举报
用来做背景挺不错的。自己在稍加修饰下就完全可以操作
回复 使用道具 举报
好厉害啊  不懂诶
回复 使用道具 举报
挺厉害的
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马