关注互联网应用及运维技术的个人博客

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">NONETEST</div>
</body>
</html>
赞(0)
未经允许不得转载:飞天狒狒 » HTML+css3实现字体3D效果

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址