您的位置: 首页  >  文章  >  CSS3中怎么实现滚动条动画效果

CSS3中怎么实现滚动条动画效果

分类: 文章 • 2022-09-30 21:52:43

本篇文章给大家分享的是有关CSS3中怎么实现滚动条动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

  1. <body>   

  2.         <div id="div">   

  3.         <ul id="ul">   

  4.             <li>感</li>   

  5.             <li>觉</li>   

  6.             <li>好</li>   

  7.             <li>的</li>   

  8.             <li>请</li>   

  9.             <li>点</li>   

  10.             <li>击</li>   

  11.             <li>推</li>   

  12.             <li>荐</li>   

  13.         </ul>   

  14.         </div>   

  15.     </body>   

接下来我们在在style样式里面调整样式，实现他的滚动

CSS Code复制内容到剪贴板

  1. <style>　　/*先给个整体去除下划线*/  

  2.         ul,li,ol{   

  3.             list-style: none;   

  4.         }　　/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/  

  5.         @-webkit-keyframes move {   

  6.                 0% {   

  7.                     left: 0;   

  8.                 }   

  9.                 100% {   

  10.                     left: -400px;   

  11.                 }   

  12.             }   

  13.        /*以下是布局样式*/     

  14.         #div{   

  15.             width: 500px;   

  16.             height: 100px;   

  17.             margin: 100px auto;   

  18.             border: 5px solid green;   

  19.             position: relative;       

  20.             overflow: hidden;       

  21.         }   

  22.         #ul{   

  23.             position: absolute;           

  24.             padding: 0;   

  25.             margin-top: 0px;       

  26.             width: 185%;   

  27.             display: block;/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/  

  28.             -webkit-animation: 3s move infinite linear;   

  29.         }   

  30.         #ul li{   

  31.             float: left;   

  32.             background: black;   

  33.             color: white;   

  34.             margin-left: 1px;   

  35.             width: 100px;   

  36.             height: 100px;       

  37.             text-align: center;   

  38.             line-height: 100px;   

  39.         }   

  40.         /*这句话代表鼠标移动上去滚动会停止，类似于轮播*/  

  41.         #div:hover #ul {   

  42.         -webkit-animation-play-state: paused;   

  43.             }   

  44.     </style>   

以上就是CSS3中怎么实现滚动条动画效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

相关推荐