读心悦

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

HTML+css3实现字体3D效果

2020年07月23日 427点热度 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年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

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

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
react 闲谈 mysql node git Echarts JavaScript taro redux flutter Nginx 随笔 悦读 vue canvas CSS 小程序 阅读 hook
推荐文章
  1. css水平垂直居中的几种方式
  2. 滤镜,好久不见
  3. css关于居中的方式
  4. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号