CSS3实现滚动条动画效果代码分享

先给大家一张效果图，看似简单，其实实现起来....那也是非常简单的~简单又实用
 
黑框里面的字体会自动滚动，形成滚动条，可以用于展示和提示，首先我们先要在body里面写上自己想要的文字，比如我想写：感觉好的请点击推荐

1.   
2.         "div">   
3.            
4.             
5. 感
  
6.             
7. 觉
  
8.             
9. 好
  
10.             
11. 的
  
12.             
13. 请
  
14.             
15. 点
  
16.             
17. 击
  
18.             
19. 推
  
20.             
21. 荐
  
22.            
23.            
24.        

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

1. 　　  
2.         ul,li,ol{   
3.             list-style: none;   
4.         }　　  
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;  
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.        

以上所述是小编给大家介绍的CSS3实现动画滚动条代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！