黑马程序员技术交流社区

标题: 一个H5特效 [打印本页]
作者: 冬冬宋    时间: 2016-8-10 01:03
标题: 一个H5特效
[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);
        }
作者: 王磊_csOE4    时间: 2016-8-19 09:49
刚看过，可能比较适合做背景的东东。
作者: guan19910512    时间: 2016-8-19 15:43
用来做背景挺不错的。自己在稍加修饰下就完全可以操作
作者: ms199211    时间: 2016-8-23 21:19
好厉害啊  不懂诶
作者: 存少    时间: 2016-9-10 08:29
挺厉害的



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2