响应式奶油立体字效果

59 篇文章 0 订阅
52 篇文章 0 订阅

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


在线研究点这里,下载收藏戳这里。

原理解析

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

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

3.实现响应式布局

实现步骤

html

<link href='http://fonts.googleapis.com/css?family=Bad+Script|Atomic+Age|Paprika' rel='stylesheet' type='text/css'>
<h1>whqet</h1>
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,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值