轮播图小案例

最新推荐文章于 2024-07-14 10:25:44 发布

April再冰

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量74

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_48049613/article/details/117091093

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动画
    随着时间的推移动态的改变css的样式属性
    （1）语法【组成】
        animation 动画的配置
        @keyframes 动画的关键帧
    （2）属性 例如：
        /* 动画的名称 */
        animation-name: move;
        /* 动画持续的时间 */
        animation-duration: 1s;
        /* 动画的填充模式 当前div在动画结束时显示的位置
            forwards 元素在动画最后一帧的位置显示
            backwords 元素在动画结束后回到开始的位置【默认值】
            前提：动画的执行次数是有限的
        */
        animation-fill-mode: forwards;
        /* 动画执行次数 */
        animation-iteration-count: 2;
        /* 动画的速度
            linear 匀速
            ease 先快后慢
            ease-in 先慢后快 */
        animation-timing-function: linear;
        /* 动画的延迟时间 */
        animation-delay: 2s;
        /* 动画的方向 */
        animation-direction: alternate;        

        /* 速写 */
        /* animation: move duration timing-function delay iteration-count direction fill-mode; */
        /* 动画的状态
            pasued 暂停
            running 执行 */
        animation-play-state: paused;
        /* 1、动画的定义 
        @keyframes css固定语法
        move 动画的名称，可以自定义
        from 动画的开始时间
        to 动画的结束时间
    */
    @keyframes move {
        from{
            left: 0;
        }
        to{
            left: calc(100% - 100px);;
        }
    }

<!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>
</head>
<style>
    .eye {
        width: 400px;
        height: 300px;
        border: 1px solid #333;
        margin: 100px auto;
        overflow: hidden;
    }
    /* 图片的容器 */

    .wrap {
        width: 1600px;
        height: 300px;
        margin-left: -400px;
        animation: move 4s infinite steps(4);
    }
    .item {
        width: 400px;
        height: 300px;
        float: left;
    }
    /* .wrap .item:first-child {
        background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
        background-size: 100% 100%;
    } */
    @keyframes move {
        from {
            margin-left: 0px;
        }
        to {
            margin-left: -1600px;
        }
    }
</style>
<body>
    <div class="eye">
        <div class="wrap">
            <div class="item" style="background-color: darkorange;">1</div>
            <div class="item" style="background-color: blueviolet;">2</div>
            <div class="item" style="background-color: brown;">3</div>
            <div class="item" style="background-color: cornflowerblue;">4</div>
        </div>
    </div>
</body>
</html>

April再冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
轮播图小案例

动画随着时间的推移动态的改变css的样式属性（1）语法【组成】 animation 动画的配置 @keyframes 动画的关键帧（2）属性例如： /* 动画的名称 */ animation-name: move; /* 动画持续的时间 */ animation-duration: 1s; /* 动画的填充模式当前div在动画结束时显示的位置
复制链接

扫一扫