web网页制作,css遮挡动画(让文字慢慢浮现)

28
五月
2021

话不多说先上图:

就是先让文字隐藏在背面,鼠标的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;
}

再附上一张原图:

2021/5/27

近代史课上编辑

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员