CSS动画效果360首页案例展示

清守

2024-07-02 帮助1人

<!DOCTYPE html>
<html lang="zh-CN">

<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>360首页</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(../images/3604.jpg) no-repeat center 0px;
            background-size: cover;
        }

        .left {
            position: absolute;
            left: 20%;
            top: 22.7%;
            animation: left 10s infinite alternate;
        }

        .airship {
            position: absolute;
            right: 28%;
            top: 39%;
            animation: airship 10s infinite alternate;
        }

        .left img {
            width: 80%;
        }

        .right img {
            width: 80%;
        }

        .right {
            position: absolute;
            right: 6%;
            top: 50%;
            //因为右边星球与左边星球动画效果一致，所以选择了用left没有更改
            animation: left 10s infinite alternate;
        }

        @keyframes left {
            to {
                transform: translateY(-30px);
            }
        }

        @keyframes airship {
            to {
                transform: rotateZ(-15deg);
            }
        }
    </style>
</head>

<body>
    <div class="left">
        <img src="../images/3601.png" alt="">
    </div>

    <div class="right">
        <img src="../images/3602.png" alt="">
    </div>

    <div class="airship">
        <img src="../images/3603.png" alt="">
    </div>
</body>

</html>

动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态;
其中执行完毕状态与重复次数相悖，所以选其一就好了

鼠标经过暂停动画，用于:hover内
animation-play-state: paused;

这是其中所需要用到的图片：
学新通

这个案例主要是为了新手入门学习动画效果展示所用。

这篇好文章是转载于：学新通技术网

CSS动画效果360首页案例展示

动画属性

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗