• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    html+css实现文字折叠特效实例

    发布者: 天下网吧 | 发布时间: 2025-8-16 22:09| 查看数: 36| 评论数: 0|帖子模式

    本文主要介绍了html+css实现文字折叠特效实例,分享给大家,具体如下:
    效果:

    实现:
    1. 定义标签:
    1. <h1>aurora</h1>
    复制代码
    2. 设置文字基本样式:
    1. h1{
    2.              text-transform: uppercase;
    3.              letter-spacing: 3px;
    4.              font-size: 15vw;
    5.              transform: rotate(-10deg) skew(30deg);
    6.              position: relative;
    7.              color: rgba(0, 101, 253, 0.6);
    8.              -webkit-text-stroke: 2px  rgba(0, 101, 253, 0.6);
    9.              transition: all 1s;
    10.          }
    复制代码
    text-transform: uppercase; 字母变为大写字母。
    letter-spacing: 3px; 字间距。
    transform: rotate(-10deg) skew(30deg); 先旋转-10deg,再倾斜30deg。
    -webkit-text-stroke: 2px rgba(0, 101, 253, 0.6); 文字边框 详细
    transition: all 1s; 过渡效果
    3. 鼠标经过文字显示内陷效果:
    1. h1:hover{
    2.            /*   先叠层白的,再叠层黑的,先叠的白会覆盖到黑,白的地方亮,黑的地方暗 */
    3.             text-shadow:3px 3px 6px #fff,
    4.             3px 3px 6px #fff,
    5.             0 0 0px #000;           
    6.          }
    复制代码
    主要是利用阴影先叠层白的阴影,再在白的后面叠层黑的阴影,这样一来,白的地方发亮,黑的地方暗,形成内陷效果。
    4. 用双伪类实现文字的上半部分,(注:双伪类会继承父元素的些css属性):
    1. h1::before{
    2.              content: 'aurora';
    3.              color: rgb(255, 255, 255);
    4.              position: absolute;
    5.              top: 0;
    6.              left: 0;
    7.              clip-path: inset(0 0 50% 0);
    8.              transition: all 1s;     
    9.              transform: rotateX(0deg) skew(0deg);      

    10.          }
    复制代码
    position: absolute;
    top: 0;
    left: 0; 定位。
    clip-path: inset(0 0 50% 0); 裁剪,只裁文字的上半部分显示。
    transform: rotateX(0deg) skew(0deg); 暂时不旋转,不倾斜。
    5. 鼠标经过文字上半部分文字折叠:
    1. h1:hover::before{
    2.             transform: rotateX(-30deg) skew(-30deg);
    3.            color: rgb(243, 243, 243);
    4.            text-shadow: 0 0 1px black;
    5.             
    6.          }
    复制代码
    transform: rotateX(-30deg) skew(-30deg); 旋转-30deg,倾斜-30deg。
    color: rgb(243, 243, 243); 颜色变暗点。
    text-shadow: 0 0 1px black; 阴影。
    6. 异曲同工,设置下半部分:
    1. h1::after{
    2.              content: 'aurora';
    3.              color: rgb(255, 255, 255);
    4.              position: absolute;
    5.              top: 0;
    6.              left: 0;
    7.              clip-path: inset(50% 0 0 0);
    8.              transition: all 1s;     
    9.              transform: rotateX(0deg) skew(0deg);
    10.             
    11.          }
    12.          h1:hover::after{
    13.             transform: rotateX(40deg) skewX(20deg) ;
    14.             color: rgb(212, 212, 212);
    15.             text-shadow: 0 0 1px black;
    16.          }
    复制代码
    完整代码:
    1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        body{            height: 100vh;            width: 100vw;            display: flex;            justify-content: center;            align-items: center;        }              h1{
    2.              text-transform: uppercase;
    3.              letter-spacing: 3px;
    4.              font-size: 15vw;
    5.              transform: rotate(-10deg) skew(30deg);
    6.              position: relative;
    7.              color: rgba(0, 101, 253, 0.6);
    8.              -webkit-text-stroke: 2px  rgba(0, 101, 253, 0.6);
    9.              transition: all 1s;
    10.          }         h1:hover{
    11.            /*   先叠层白的,再叠层黑的,先叠的白会覆盖到黑,白的地方亮,黑的地方暗 */
    12.             text-shadow:3px 3px 6px #fff,
    13.             3px 3px 6px #fff,
    14.             0 0 0px #000;           
    15.          }         h1::before{
    16.              content: 'aurora';
    17.              color: rgb(255, 255, 255);
    18.              position: absolute;
    19.              top: 0;
    20.              left: 0;
    21.              clip-path: inset(0 0 50% 0);
    22.              transition: all 1s;     
    23.              transform: rotateX(0deg) skew(0deg);      

    24.          }         h1:hover::before{
    25.             transform: rotateX(-30deg) skew(-30deg);
    26.            color: rgb(243, 243, 243);
    27.            text-shadow: 0 0 1px black;
    28.             
    29.          }         h1::after{
    30.              content: 'aurora';
    31.              color: rgb(255, 255, 255);
    32.              position: absolute;
    33.              top: 0;
    34.              left: 0;
    35.              clip-path: inset(50% 0 0 0);
    36.              transition: all 1s;     
    37.              transform: rotateX(0deg) skew(0deg);
    38.             
    39.          }
    40.          h1:hover::after{
    41.             transform: rotateX(40deg) skewX(20deg) ;
    42.             color: rgb(212, 212, 212);
    43.             text-shadow: 0 0 1px black;
    44.          }    </style></head><body>       <h1>aurora</h1></body></html>
    复制代码
    到此这篇关于html+css实现文字折叠特效实例的文章就介绍到这了,更多相关html+css文字折叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    ×

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表