html文字悬停效果，简单的css鼠标悬停透视文本动画

最新推荐文章于 2024-05-04 15:31:42 发布

正在修炼web的小芮

最新推荐文章于 2024-05-04 15:31:42 发布

阅读量765

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/126050204

版权

       <style>
            html{
            background-color: #5138BE;
            height: 100%;
        }
        body{
            color: #ffffff;
            display: flex;
        }
        .Words{
            margin: 0 auto;
            padding: 80px 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 68px;
            font-weight: 900px;
            letter-spacing: -2px;
            text-transform: uppercase;
            transform: translate3d(0,0,0);
            -webkit-font-smoothing: antialiased;
            -webkit-font-kerning: normal;
            -webkit-text-size-adjust: 100%;
        }
        .Words-line{
            height: 50px;
            overflow: hidden;
            position: relative;
        }
        .Words-line:nth-child(odd){
            transform: skew(60deg,-30deg) scaleY(0.66667);
        }
        .Words-line:nth-child(even){
            transform: skew(0deg,-30deg) scaleY(1.33333);
        }
        .Words-li