Css动画效果

顾北...

已于 2023-06-28 08:54:37 修改

阅读量91

点赞数

文章标签： css 前端

于 2023-06-27 16:23:06 首次发布

原文链接：https://blog.csdn.net/xiaoming4965/article/details/129528961

版权

<!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>Document</title>
</head>

<body>
    <!-- css 动画从左往右 -->
    <!-- <div class="main">
        <p>Css动画</p>
</div> -->

    <!-- css移入添加滤镜 -->
    <div class="box">
        <div class="image2" style="background-image: url(../img/下载.png)"></div>
    </div>
</body>
<style>
    /* p {
        font-size: 45px;
        font-weight: 700;
        margin-bottom: 25px;
        transform: translate(0);
    }

    .main {
        width: 1200px;
        position: absolute;
        top: 30%;
        left: 18%;
        animation: example1 1s ease-out 0s backwards;
    }

    @keyframes example1 {
        0% {
            transform: translate(-100px);
            opacity: 0;
        }

        50% {
            transform: translate();
            opacity: 0.5;
        }

        100% {
            transform: translate(0);

        }
    } */

    .image2 {
        width: 1600px;
        height: 500px;
        background-size: 100% 100%;
    }

    .box .image2:hover {
        filter: saturate(130%);
    }
</style>

</html>