web网页制作，css遮挡动画（让文字慢慢浮现）_隐藏文字然后缓慢出现html-CSDN博客

本文链接：https://blog.csdn.net/galaxyrt/article/details/117336644

话不多说先上图：

就是先让文字隐藏在背面，鼠标的hover属性让文字慢慢出现

下面是html部分代码（代码经本人亲自敲打没有问题，粘过去就能用有用。别忘了一键三连哦）

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li>
            <a href="">
                <h3>现在—成为者</h3>
                <p>所有的意识生物都是不朽的精神生命，这其中包括人类。艾罗称为‘现在—成为者’，因为，一个不朽的生命最初的天性，是生活在永恒的状态 ——‘现在’，而唯一使他们如此存在的理由，是他们决定去——‘成为’。</p>
            </a>
        </li>
        <li>
            <a href="">
                <h3>同领地</h3>
                <p>“同领地”是一支种族或一种文明世界的名称。这个文明社会管理着数量庞大的星系、恒星、行星、卫星和陨石群，所掌控范围遍及了整个有形宇宙的四分之一！她所在的机构正在进行的任务，是“保护、控制和扩展同领地的版图与资源”。</p>
            </a>
        </li>
        <li>
            <a href="">
                <h3>轮回机制</h3>
                <p>辽阔的空间区域设有电子强制滤网，电子强制滤网被设计用于探测现在-成为者的存在，并且阻止他们离开原来的区域。如果有哪个现在-成为者想试图穿过这个“强制滤网”，那么，它将在一种“电子网络”中将其捕获。他们每个人都被数十亿的电压处理，使记忆缺失，并用一些虚假的图像和催眠指令替换了他们原有的记忆，然后发送到地球上寄居在那些生物的躯体中。</p>
            </a>
        </li>
        <li>
            <a href="">
                <h3>地球是旧帝国监狱</h3>
                <p>一个现在-成为者将无法逃脱牢笼，因为他们无法回忆起自己是谁，曾来自何方，以及现在的处境。除了他们自己真实的经历之外，早已经被催眠去认为他们是某个人，在某件事中，某个时候和某个地方。因此，在这整个一大片的太空区域，地球已经变成了一个通用的倾倒垃圾的场所。地球本身是一个高度不稳定的行星。</p>
            </a>
        </li>
    </ul>
</body>
</html>

下面是css部分：

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #000;
}

ul {
    width: 1100px;
    margin: 200px auto;
    /* background-color: #aaa; */
    overflow: hidden;
    /*隐藏文字部分*/
}

ul li {
    list-style: none;
    /*去除前面的符号*/
    float: left;
    width: 260px;
    height: 500px;
    margin-left: 10px;
    background-size: cover;
    /*让图片全覆盖*/
}

ul li:nth-of-type(1) {
    background-image: url(images/b10.jpg);
}

ul li:nth-of-type(2) {
    background-image: url(images/b12.jpg);
}

ul li:nth-of-type(3) {
    background-image: url(images/b14.jpg);
}

ul li:nth-of-type(4) {
    background-image: url(images/b15.jpg);
}

ul li a {
    text-decoration: none;
    color: #ddd;
    display: block;
    /*块级标记*/
    width: 260px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    /*半透明*/
    transform: translateY(500px);
    /*让文字向下移动500px*/
    transition: all linear 2s;
}

ul li:hover a {
    transform: translateY(0);
}

ul li a h3 {
    font-size: 30px;
    margin-left: 30px;
    padding-top: 60px;
}

ul li a p {
    font-size: 15px;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 20px;
    border-top: solid 2px #aaa;
}

再附上一张原图：