css代码实现滚动轮播效果

最新推荐文章于 2024-04-10 23:48:49 发布

张续栋

最新推荐文章于 2024-04-10 23:48:49 发布

阅读量1.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44984407/article/details/105883845

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用简单的css代码实现滚动轮播效果

以前做滚动轮播，都是用js实现的，最近发现可以通过css3的一些新特性实现滚动轮播效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css滚动效果</title>
    <style>
          html,
          body,
          #container {
          height: 100%;
          width: 100%;
          }
          #body{
          /* background:url(/static/home/images/body_bg.jpg) center top; */
          background: url("./body_bg.png");
          
          }
            .anjchuli {
            width: 90%;
            height: 270px;
            }
            .anjchuli-bottom {
            width: 100%;
            border: 1 solid #04fdfc;
            overflow: hidden;
            }

            .anjchuli-bottom2 {
            width: 100%;
            border: 1 solid #04fdfc;
            position: relative;
            overflow: hidden;
            z-index: 3;
            }

            @keyframes anis {
            100% {
            transform: translateY(-200px)
            }
            }

            .anjchuli-bottom2 img {
            position: absolute;
            }

            .anjchuli-bottom2 {
            animation: anis 10s linear infinite;
            }

            .anjchuli-bottom2:hover {
            animation-play-state: paused;
            }
            .on-right-bottom {
            flex: 33%;
            margin: 0px 10px;
            }
             .anjchuli-head {
             display: flex;
             width: 100%;
             height: 46px;
             text-align: center;
             background-image: linear-gradient(186deg,
             #296ae8 0%,
             #3b88f4 0%,
             #4ca6ff 0%,
             #00d1fe 100%),
             linear-gradient(#04cdf4,
             #04cdf4);
             background-blend-mode: normal,
             normal;
             }

             .anjchuli-head span {
             flex: 33%;
             font-family: MicrosoftYaHei;
             font-size: 16px;
             font-weight: normal;
             font-stretch: normal;
             line-height: 50px;
             letter-spacing: 0px;
             color: #ffffff;
             }
            .anjchuli-bottom2 {
            /* height: 11px; */
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            background-color: rgba(7, 82, 123, 0.4);
            /* opacity: 0.14; */
            line-height: 58px;
            letter-spacing: 0px;
            color: #42ebea;
            }

            .anjchuli-bottom2-li {
            display: flex;
            height: 45px;
            border-bottom: 1px solid rgba(7, 62, 101, 1);
            text-align: center;
            }

            .anjchuli-bottom2-li span {
            flex: 33%;
            }
            .anjchuli-wen {
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 70px;
            letter-spacing: 0px;
            background: linear-gradient(to right, #01ffff, #0f8dff);
            -webkit-background-clip: text;
            color: transparent;
            }
    </style>
</head>
<body style=" background-size:100% 100%;" id="body">
     <div class="anjchuli on-right-bottom">
         <div class="anjchuli-wen">处理中的案件/事件</div>
         <div
             style="margin-top: -10px; margin-bottom: 25px; height: 1px; width: 100px; background: linear-gradient(to right, #01ffff, #0f8dff)">
         </div>
         <div class="anjchuli-head"> <span>案件/事件</span><span>所属中队</span><span>执行人</span></div>
         <div class="anjchuli-bottom">
             <div class="anjchuli-bottom2" id="anjchuliBottom2">
                 <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
                 <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
                 <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
                 <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
                 <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
                 <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
             </div>
         </div>
     </div>
    
</body>
</html>

两图对比出效果
在这里插入图片描述

如果想要实现无缝轮播只需要让类名为class="anjchuli-bottom"的盒子的高度小于类名为class="anjchuli-bottom2"盒子的高度即可

张续栋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css代码实现滚动轮播效果

用简单的css代码实现滚动轮播效果以前做滚动轮播，都是用js实现的，最近发现可以通过css3的一些新特性实现滚动轮播效果。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...
复制链接

扫一扫