响应式奶油立体字效果

超、凢脫俗 2022-08-25 14:43 121阅读 0赞

好的，CSS3演武场今天继续，来看一个由text-shadow实现的响应式立体字效果。

![SouthEast][]

[在线研究][Link 1]点这里，[下载收藏][Link 2]戳这里。

原理解析

1.使用googlefont字体，本效果里面使用三种字体

2.使用text-shadow实现立体字

3.实现响应式布局

实现步骤

html

css

body {
       font-family: 'Bad Script', cursive;
        background: #abdc28;
        transition:all .8s ease-in-out;
        -o-transition:all .8s ease-in-out;
        -moz-transition:all .8s ease-in-out;
        -webkit-transition:all .8s ease-in-out;
    }
    h1 {
        width: 100%;
        font-size: 160px;
        margin: 125px auto;
        text-align: center;
        color: #fff;
        text-shadow: 0px 1px 1px #ddd, 
                     0px 2px 1px #d6d6d6, 
                     0px 3px 1px #ccc, 
                     0px 4px 1px #c5c5c5, 
                     0px 5px 1px #c1c1c1, 
                     0px 6px 1px #bbb, 
                     0px 7px 1px #777, 
                     0px 8px 3px rgba(100, 100, 100, 0.4), 
                     0px 9px 5px rgba(100, 100, 100, 0.1), 
                     0px 10px 7px rgba(100, 100, 100, 0.15), 
                     0px 11px 9px rgba(100, 100, 100, 0.2), 
                     0px 12px 11px rgba(100, 100, 100, 0.25), 
                     0px 13px 15px rgba(100, 100, 100, 0.3);
        transition:all .8s ease-in-out;
        -o-transition:all .8s ease-in-out;
        -moz-transition:all .8s ease-in-out;
        -webkit-transition:all .8s ease-in-out;
    }
    @media screen and (max-width:768px) {
        body {
            background:red;
            font-family: 'Atomic Age', cursive;
        }
        h1 {
            font-size:90px;
        }
    }
    @media screen and (max-width:480px) {
        body {
            background:yellow;
            font-family: 'Pinyon Script', cursive;
        }
        h1 {
            font-size:50px;
        }
    }

完工，效果简单，不再多言。

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[SouthEast]: /images/20220824/398aa1640b194aba877789b30f052076.png
[Link 1]: http://codepen.io/whqet/pen/HAtKB
[Link 2]: http://codepen.io/whqet/share/zip/HAtKB
[whqet]: http://blog.csdn.net/whqet