css轮播纵向滚动

最新推荐文章于 2023-10-20 16:11:35 发布

学习使我快乐——玉祥

最新推荐文章于 2023-10-20 16:11:35 发布

阅读量538

点赞数

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

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/128380515

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css轮播纵向滚动</title>
</head>

<body>
    <div class="box">
        <div class="adbar">
            <img class="p1"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAECUlEQVR4Ae2agU0kMQxFtwI6oAJKoAE6oAMaoAIqoAI6oANqoAkamdM/XVA2mmH8/W1HJxJpNTPLembz4tj+Xi7bGm4CF7flMtwWPMEJFrwFTyAgmC7PW/AEAoLp8rz/Ft7Hx7ZdLv7XzY0wdd10rue9vPjBNehYgEljLrz7ex3e8/MkdNvEIvnrSwcH77u7+4XwXl9j4AHg5+cUgPO27eNjHDwsxIQxDx4yZQv66vHhYQK6WTHv/T0OXAM/Ad8cz3t6iof39laObw48ZMjmMVFHLEjxqIeHzGgFxkC+vS1GNyPmMaoCW9EKGp8rVhv1nofMaAHSil8mK2NhCkc9PAs4fKbJLits2EDuFY5aeMw2bFuQ2eYACNlXNGrhWVVF32piEgzgFaqNWnjIiJjg2WtUDFY73BcLVDTq4DGNz9F7rB4LeL3XJkOsg4cEcOZx7e9jl4SJlbgH5F/BqINnLXhbidJPnu39FamNGnjM5I8mboUPz9tbgH4xgs5r4DGNz6Mtx2x7ABy3fhCw/jY18JhCt/92/TnbxipQGzXwrBJrLFF6eDi33geed3av8d6O63x4TKY88xbGgwEwWW3kw2Man2dxiomdgIeFSxz58KzqwNKPY6VastrIhcdM1jpR62LA8ywLInhmLjymI2LdYkwYAMDWnREgHZnmwmP+ncIa3JkEBHitL3hEQHg/Dx6jKpgmJnNfwEtUG3nwmMzIegfj0QB4lsWd3pcHj2kjsXGJlWpji8sJazTLg2dVA57+G9MbhOclqY0ceMzkrCXKuOzWxQE8zwKNz9u5zoHHlBPeLcVKNWsptAPp6K0ceEzvzVqijDNgEhK876hPON6XuI6Hx6gKpYxgngN4CWojHh6jKlRvYDwcANmsfuKF8fDYWIRJVb3OWl4nsMY/x8OrAuF5DqNkRlI717HwWN3pAaDaeBNUOjxGVagQvPbe0igdHtNr805etfMW5anwGFWhAlDsA9VGXMxjxboCQLU9+m14x7t+eisOHltzqQAUe7W+/Ec0Bh7boFQmHmGrKJvOFWPgMTozMGB/z4OValiAgAZpDDxGVQSWCt/wcMKGjQC1EQOP6a0FrPgVtHbBtMHgeQENUh0eoyqCYk3jdXVkvkeLm6La0OExKx6U5a6g9RcNivUoNkh1eIyqCKqvel5X5+yvamLy0uAxWS6wsr8C1l8wvUR4p9gg1eAxXzYgQPecds89ElFokGrwmG2SVaKMFJnMD+9jf3DvnueHx6qKrBKlm8zfU7YtJlQAfnhMaSDGlpHPj9eM2mlZ2Vmy+OExK5xdovQ02R0BgM6Q4ofXf+Ffer7gCQu/4C14AgHBdHnegicQEEyX5y14AgHBdHnegicQEEyX5wnw/gBl4XiWaaeS9AAAAABJRU5ErkJggg==">
            <img class="p2"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAADJElEQVR4Ae3bzWkcQRCG4Y3BISgDZeAElIACcAIOwBE4A4WgFAQ++KCDDhYGgcCggw4yvujii08tXouGZmGXrq7qma2aGhh2JKZ3NM9+/TurXcltWGA3XDILlsRThCDxEk8hoCiayUs8hYCiaCbvpPC+7UqZtf/4WAr7w2Upvz6X8ue6lH+/FbevK2qfvFlwx9737ryUx0+l/L3XaQhLx8BrYUkmiVxgi4dXIanak6t0XDwQqc4Tq3JsPABvz6YlMD4egLSDE7Zt4AH4/NWcbzt4tH/G27p4PUMKGnzOY1AMACka3V9vTPlOH2//dsGkDRsBfPqy/26qn/3h1dtlHCcFpIzh5hcPBGk1Nu51fePRg0rSl3hNvWP6lXgNiPQw8aRizfkSvOwwGjgOJXiMFQ033x3Gy5UMr2dQLsD1jScZ633/IGDpO9UvHlOtFassvD7xgCNJvXicO2FV2R8e81MJHMDGc9paqU8fj5TRMfB0TIoGnPHwpMKtX217q93oeRPhYuOR1MnbutV2NFHHyjH5Nx7PHfoMYuH9vHhvHw/drfHvY+HVRNKx0N5NfGbL5xATr0WcNEyJj1cRJ/W6sZNX8XidALgdPAA3tyTFnJShB88rSA/fPWkTJT02fHa7bvJGx2NAjiIaPgTyiUdXRyJJojR5nG80hPGLVwe8DIylgEZTN/94JFC62mJUdf3jkUCSJE1fTa7iNQYeHY8Uz2BlOQYe6ZHijfb0TVITr8GQHiaeVKw5Pwae9DEkVdxgs3mX9g+RtD0G7c7/S7PsJLlu4jWfmPRLjkZf7vafPOn3VUid0fKUbzzmqNLZBXhG/5PhF49OYmRlBWyDATKNhj88bpxFzZHEGVZZP3ikrC6GjqIBx260HLU+Xr2hpV5DLcMvhcZ1jIYnzQBp5TZvKbxJ/3O7boexBB6JM2zntpM8luiNhiUtWj2OmTyqKTOPyVssPNCMZg897v7xaNN4hmH4MLsHjnP84PHEi51JPeM1lrMmtmc9gPZ4PVcNck7iKT7IxEs8hYCiaCYv8RQCiqKZvMRTCCiKZvISTyGgKJrJU+C9ARoZoj8KF7dRAAAAAElFTkSuQmCC">
            <img class="p3"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAADf0lEQVR4Ae2aT6oUMRCHZ+3aA7j2AK49gGtP4N4beAPv4BEEQR6CC8GF4EIQxI0rd+70+Z5/EGn5RgN50jND1S/p7goVmNfDm046+fKrVFXSuymLm8DOXTMrTglPEEHCS3gCAaFqKi/hCQSEqqm8EeCdffo13X/7fbr7+nK6+fx8/7n25Mu0e/x59sNv5b47ry729R5++DHRzlJlVeU9+vhzYuDXnx6GdAjesf/T3u2XF/vJ6AlzFXgoDNUcA9DqN57TqywKD7O68WwZaAV+eHjvzn/vzbMMaMlraHisa63XNAv8sPAAd8xjWiB47w0JbwvgAB4O3lbAhYOHc1jbVGsTD6U8Olt33vOdcIZMg9AGFf9fCHz5rc5IDk1YGHgMxgOr1CErUDICQN978+1KLBkCnmKuhDIoqWVhEgDJhPQqzTIMzKwoyHLFRAEfsTSB51VdZHBMdhN4HtVhqlEVV6ykCTxP+tV6jSsDWvIqw3vw3u5hb734uuQYuz1Lhoc3szgI7p2L3bqNsGPDMjyryfaMuzpymm1agoeCrKojkB6lSPAIQq3wonvYeuIleNb1jrhupCLBA4ZFeZyUjVQkeBZw3IuZj1Tc8Ei8rfBGCIzryXfDA4QVnrLdVHd6K98XhbeVQbfqhxueJ0xp1emttOOG59lJ2cqgW/Uj4QkkE17CEwgIVVN5CU8gIFR1Ky9DFeEAyJNhZHr2T+YeeJx3jFTcZuvZGCCwHqm44QHBujEw0vnFfvyKEqybobzJNFKRlGfdhkepI617EjxPuNLzraWlVS3B8xw9YrqjnKBJ8Jhp66E3pjuK15XhcSJm9bqob4QteRmex3SBPULYIsPDdK0hS1FqdOfRBJ7yIndPgPSrZ/tN4HkdR1EgJtxqDaQdHFJxZD2Xh2bwFPUBESfCoD0QCX14Pi9Nlgkp1xDwUB8dLZ1WrqyhgGTnZu5FSP4PLDz9qfU2DDxUg4IUcK3rhoGH+jzvKLcGVrcXCh4A1fWvHrz6PRy8LQEMCW8rAMPCAyDe8pRHVE3zWP3Q8ABIIfRYwxMPAQ+ABLNLQUTtbNZ6gu6/0336b7MM4/Sjrt5BSEPe2UqNtEOG0RtYPYrV4NWdYF0sGQNmxufQOkbOWu5BxdSby0Lq9nt93wS8XoPr3W7CEwgnvIQnEBCqpvISnkBAqJrKS3gCAaFqKk+A9wcxPK+vZrbgKQAAAABJRU5ErkJggg==">
            <img class="p4"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAC8klEQVR4Ae3bjY3CMAwF4K7ADKzADozADKzABmzABkzABCzAAmzADjk91EjRVUAcO7Q2r9IJVDVF/Wrnx+0NiVuzwNDckg0T8RRBQDziKQQUTRl5xFMIKJoy8paAdzwe0zAMpn+r1Sptt9vn3+FwSPiN6/WaHo+H4pLtmppFXg+8dzdjs9kkgN5uNzsN4Znc4pWw6/U6nc9n4aXrDw+BlyG/jRgKLyOin7zf7/rQ+nCGkHhAxGCDwaXnFhYvR2HPvjA8HhB7Af4EHlK4x5RmFjx06J829FeXy+U5McacLqdh6yfOYT25Xizef1yMnpiII4paAdHecnODly8aiIjcVkDLKYw7vIy43++bANHOanOLB4BWQKvoc40HwJbB5HQ6mQSfezxMQaT9H9bAFpt7PCC0pK9F6obAa4k+i9QNgYfoQypK0ne326kzNwweqsoSPIt+LwwelnISPByrXa6FwQOEFE9b7wuDhw5Muu7VlqpC4UnXvNpCQSg8jKCS1CVeMeEAhgRPO10JFXlSvJqibHFvJl+JNyGp30G8eqvJkcSbkNTvIF691eRI4k1I6ncQr95qcuRP43GSXMSDdJ5HvAJPurZlYaDAkz5JY0mqwJOsa3Esi6EjHqJIgscyfBF10sFCW1HBT4eZqkj7Oz56HCMPD7AlKYtj+dB7xJvjsWOItMWIKX3wo50cj/fMf58nfW5hlbLuIw8rBGlfx5cbU3q+3S5NV0BrVxU5Zd1GHl6taIGzjDp3eBgcpCNrTmtgW0xP3EUe0DBCtkRbxtNWUEq0/H2RKwy8rIi+CWDSMlPGKj+t03VWvPLCen/Hsq3XNkvk9QbL5wectuz0Dj4sHlK1JxxQQ+JZLb/eRV04PKRpj38NfYUYIvJQFe4xFXmFlve7xsM0Zg40t3gAQxXYerWQQSSfi4w89F1AQrkJnT+i65t9WS2gGV7tD0Y6jniKu0k84ikEFE0ZecRTCCiaMvKIpxBQNGXkEU8hoGjKyFPg/QGl8VCzEye1zgAAAABJRU5ErkJggg==">
        </div>
    </div>
    <style>
        .box {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }

        .adbar {
            width: 100px;
            height: 100px;
            animation: tran_X 5s infinite;
            animation-timing-function: ease-out;
        }

        .adbar img {
            -webkit-user-drag: none;
            float: left;
            width: 100%;
            height: 100%;
        }

        @keyframes tran_X {
            0% {
                transform: translate(0, 0);
            }

            20% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(0, -100%);
            }

            45% {
                transform: translate(0, -100%);
            }

            50% {
                transform: translate(0, -200%);
            }

            70% {
                transform: translate(0, -200%);
            }

            75% {
                transform: translate(0, -300%);
            }

            95% {
                transform: translate(0, -300%);
            }

            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</body>

</html>