轮播图推开效果动画实现

最新推荐文章于 2022-12-09 16:05:21 发布

大阿冬

最新推荐文章于 2022-12-09 16:05:21 发布

阅读量362

点赞数

本文链接：https://blog.csdn.net/xswlXAD/article/details/94971124

版权

demo效果图

前面的图片会运动到后面，后面的图片会运动到前面

骨架

demo HTML 的结构很简单

3d舞台+2个page

<body>
    <!--    3d舞台-->
    <div class="stage">
<!--        旋转page-->
        <div class="page"></div>
        <div class="page"></div>
    </div>
</body>

css样式

    <style>
        body,html{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        *{
            margin: 0;
            padding: 0;

        }
        /*3d舞台*/
        .stage{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
       /*转动page*/
        .page{
            width: 500px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: purple;
            transition: 1s;

        }
        .page:nth-child(1){
            animation: hiddenmove 4s infinite alternate ease-in;
        }
        .page:nth-child(2){
            background-color: #ddeeaa;
            animation: showmove 4s infinite alternate ease-in;
        }
        /*效果的主要实现依赖hiddenmove动画：
        使要隐藏的page从translateZ(200px)运动到translateZ(-200px)*/
        @keyframes  hiddenmove{
            /*初始位置*/
            0%{
                transform: translateZ(200px);
            }
            50%{
                /*横拉加旋转，向左移动状*/
                transform: translate(-200px) rotateY(45deg) ;
            }
            100%{
                /*最终状态隐于下方*/
                transform: translateZ(-200px);
            }
        }
        /*showmove动画只做普通的左右移动即可*/
        @keyframes showmove {
            0%{

            }
            50%{
                /*横拉加旋转，向右移动状*/
                transform: translate(200px) rotateY(-45deg) ;
            }
            100%{

            }
        }

    </style>

轮播图效果

大阿冬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
轮播图推开效果动画实现

demo效果图前面的图片会运动到后面，后面的图片会运动到前面骨架demo HTML 的结构很简单3d舞台+2个page<body>  <div class="stage"> <div class="page"&gt...
复制链接

扫一扫