读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

HTML+css3实现字体3D效果

2020年7月23日 617点热度 2人点赞 0条评论

 

HTML+css3实现字体3D效果插图

主要知识点:

1、text-shadow,这个属性主要是实现了字体阴影效果,当很多个阴影叠加在一起的时候,就形成了立体的效果

2、CSS3变换transform,使用transform属性的skewX(),实现字体在水平方向上倾斜;

3、字间距letter-spacing,使用字间距只要是为了在视觉上有较好的体验!

 

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css字体立体效果</title>
    <style>
     body{
         font-size: 60px;
         min-height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     #center{
        font-weight: bold;
        transform: skewX(40deg);
        letter-spacing: 10px;
        text-shadow: -1px 1px aqua,
        -2px 2px aqua,-3px 3px aqua,-4px 4px aqua,-5px 5px aqua,-6px 6px aqua,-7px 7px aqua,-8px 8px aqua,-9px 9px aqua,-10px 10px aqua;
     }
    </style>
</head>
<body>
    <div id="center">读心悦</div>
</body>
</html>

HTML+css3实现字体3D效果插图1

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2020年9月23日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
mysql flutter 阅读 JavaScript node vue CSS redux Nginx hook taro 悦读 canvas Echarts 闲谈 随笔 git react 小程序
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
JavaScript的== 的隐式类型转换 this.props.history.push传值 2020年9月2号,怪怪的,我开始写流水文字 calc失效常见的问题 在微信小程序中引入weui组件库 我在看《吉他兄弟》

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号