欢迎光临
我们一直在努力

微信小程序——字体效果之凸起效果

        凸起效果的主要思路就是使用一长串累加的投影,不设模糊并以1px(这边用rpx) 的跨度逐渐错开,使颜色逐渐变暗,然后在底部加一层强烈模糊的暗投影,从而模拟完整的立体效果。

.text2 {
  padding: 30rpx;
  font-size: 70rpx;
}

.text2 {
  background: #58a;
  color: white;
  text-shadow: 0 2rpx hsl(0, 0%, 85%),
                 0 4rpx hsl(0, 0%, 80%),
                 0 6rpx hsl(0, 0%, 75%),
                 0 8rpx hsl(0, 0%, 70%),
                 0 10rpx hsl(0, 0%, 65%);
}

在上图中可以看到,效果已经出来了,但看起来还不够真实。我们距离最终效果只差最后一步了,那就是在底部加一层投影:

.text2 {
  background: #58a;
  color: white;
  text-shadow: 0 2rpx hsl(0, 0%, 85%),
                 0 4rpx hsl(0, 0%, 80%),
                 0 6rpx hsl(0, 0%, 75%),
                 0 8rpx hsl(0, 0%, 70%),
                 0 10rpx hsl(0, 0%, 65%),
                 0 12rpx 15rpx black;
}
赞(0) 打赏
未经允许不得转载:半醉人间 » 微信小程序——字体效果之凸起效果
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    Excellent, what a blog it is! This webpage gives helpful data
    to us, keep it up.

    Сialis11个月前 (01-02)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏