3D重叠字体

最新推荐文章于 2021-10-11 15:32:22 发布

巧克力很苦

最新推荐文章于 2021-10-11 15:32:22 发布

阅读量309

点赞数

分类专栏： html+css 文章标签： 3D重叠字体

本文链接：https://blog.csdn.net/qq_44607694/article/details/87902045

版权

html+css 专栏收录该内容

54 篇文章 23 订阅

订阅专栏

3D重叠字体

3D重叠字体，涉及到很多的属性{
font-weight: bold（文字加粗） transform（变换）
position: relative（绝对定位） position: absolute（相对定位）
还有HTML里面最重要的函数data-{
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属
性的能力。
}
}
还有伪类选择器（:before和:afte）
接下来就看代码吧！标注的很清楚

HTML代码

  <body>
       <div> <!-- div块级标签 -->
           <span data-text="0">0</span> <!--span 内联级标签-->
           <span data-text="2">2</span>
           <span data-text="1">1</span>
           <span data-text="2">2</span>
           <span data-text="0">0</span>
           <span data-text="4">4</span>
           <!-- data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属
性的能力。 -->
       </div>
  </body>

CSS代码

<style>
        *{
          margin:0px;
          padding:0px;
          /*清除内外边距*/
        }
        body{
          background-color: #694CA3;/*背景颜色*/
        }
        div{
          text-align: center;/*字体居中*/
          margin:200px;/*外边距margin*/
          font-size: 150px;/*字体大小*/
          font-weight: bold;/*文字加粗*/
          color: #694CA3;/*文字颜色*/
        }
        span{
          position: relative;/*用于给伪定位属性做产考*/
        }
        span::before,span::after{
          position: absolute;/*给定位元素的绝对定位属性*/
          content: attr(data-text);/*CSS函数 attr 函数返回选择元素的属性值。*/
          top: 0px;
          left: 0px;
          transform-origin: left top;/*origin 属性允许您改变被转换元素的位置。*/
          transition: all ease-out:.3s;/*过渡慢速结束*/
        }
        span::before{
          color: rgba(0,0,0,0.2);
          transform: scale(1.1,1) skew(0deg,4deg);/*scale定义 2D 缩放转换。
          skew定义 2D 倾斜转换。*/
        }
        span::after{
          color: #694CA3;
          transform: rotateY(-40deg);	/*定义沿着 Y 轴的 3D 旋转。*/
        }
        span:hover::before{
          transform: scale(1.1,1) skew(0deg,4deg);
        }
        span:hover::after{
          transform: rotateY(-8deg)
        }
    </style>