介绍

利用CSS实现文字从中间分裂成上下两部分的效果

code

code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分裂文字</title>
    <style>
        body{
            background-color: rgb(60,60,70);
            display: flex;
            justify-content: center;
        }
        .divWords-a{
            position: relative;
            top: 250px;
            width: 300px;
            display: flex;
            justify-content: center;
            margin: 0 30px;
        }
        .divWords-c,.divWords-b{
            font: 900 100px '';
            line-height: 150px;
            position: absolute;
            color: brown;
            top: 0;
            /* 使文字上下移动时有0.4s的过渡效果 */
            transition: .4s;
        }

        .divWords-c{
            /* 裁剪文字的上半部分，括号里的四个值分别是
            top，right，bottom，left */
            clip-path: inset(49% 0 0 0);
        }
        .divWords-b{
            /* 裁剪文字的下半部分 */
            clip-path: inset(1% 0 50% 0);
        }
        .divWords-a:hover .divWords-b,.divWords-a:hover .divWords-c{
            /* 让--i为30的向上移动30px，-30的向下移动30px
            这样子就能空出60px留给中间的超链接 */
            top: calc(var(--i)*1px);
        }
        .divWords-a:hover .divWords-d{
            opacity: 1;
        }
        .divWords-d{
            text-decoration: none;
            color: cyan;
            font: 600 30px '';
            line-height: 150px;
            opacity: 0;
            transition: .3s;
        }
    </style>
</head>
<body>
<div class="divWords-a">
    <div class="divWords-b" style="--i:-30">神</div>
    <div class="divWords-c" style="--i:30">神</div>
    <a href="#" class="divWords-d">点赞/Fabulous</a>
</div>
<div class="divWords-a">
    <div class="divWords-b" style="--i:-30">码</div>
    <div class="divWords-c" style="--i:30">码</div>
    <a href="#" class="divWords-d">关注/follow</a>
</div>
<div class="divWords-a">
    <div class="divWords-b" style="--i:-30">人</div>
    <div class="divWords-c" style="--i:30">人</div>
    <a href="#" class="divWords-d">收藏/Collection</a>
</div>
</body>
</html>

效果

请输入图片描述

END

有问题请联系feinan6666@outlook.com

本文作者：
 文章标题：CSS实现分裂文字效果
 本文地址：https://home.cnboy.top/26.html
 版权说明：若无注明，本文皆神码人の世界原创，转载请保留文章出处。
最后修改：2021 年 08 月 26 日 09 : 56 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏