CSS3實(shí)現(xiàn)滾動條動畫效果代碼分享
發(fā)布時(shí)間:2016-08-03 09:32:21 作者:佚名
我要評論

本文給大家介紹CSS3實(shí)現(xiàn)動畫滾動條代碼分享的全部內(nèi)容,代碼簡單易懂,功能非常的實(shí)用,下面小編給大家分享下
先給大家一張效果圖,看似簡單,其實(shí)實(shí)現(xiàn)起來....那也是非常簡單的~簡單又實(shí)用
黑框里面的字體會自動滾動,形成滾動條,可以用于展示和提示,首先我們先要在body里面寫上自己想要的文字,比如我想寫:感覺好的請點(diǎn)擊推薦
CSS Code復(fù)制內(nèi)容到剪貼板
- <body>
- <div id="div">
- <ul id="ul">
- <li>感</li>
- <li>覺</li>
- <li>好</li>
- <li>的</li>
- <li>請</li>
- <li>點(diǎn)</li>
- <li>擊</li>
- <li>推</li>
- <li>薦</li>
- </ul>
- </div>
- </body>
接下來我們在在style樣式里面調(diào)整樣式,實(shí)現(xiàn)他的滾動
CSS Code復(fù)制內(nèi)容到剪貼板
- <style> /*先給個(gè)整體去除下劃線*/
- ul,li,ol{
- list-style: none;
- } /*這里也就是重點(diǎn)嘍,時(shí)間分段,到還沒滾動的時(shí)候時(shí)間經(jīng)過了0%所以left也就為0,當(dāng)開始滾動時(shí)間停止的時(shí)候那么就等于全部完成也就是100%,這句話寫不對效果就不出哦*/
- @-webkit-keyframes move {
- 0% {
- left: 0;
- }
- 100% {
- left: -400px;
- }
- }
- /*以下是布局樣式*/
- #div{
- width: 500px;
- height: 100px;
- margin: 100px auto;
- border: 5px solid green;
- position: relative;
- overflow: hidden;
- }
- #ul{
- position: absolute;
- padding: 0;
- margin-top: 0px;
- width: 185%;
- display: block;/*這句話也是至關(guān)重要的,少了這句話也不會滾動,我給他四個(gè)值,3s代表三秒之內(nèi)完成滾動,move這個(gè)名字對應(yīng)著上面時(shí)間分段的名字,infinite代表循環(huán)滾動,linear表示勻速滾動*/
- -webkit-animation: 3s move infinite linear;
- }
- #ul li{
- float: left;
- background: black;
- color: white;
- margin-left: 1px;
- width: 100px;
- height: 100px;
- text-align: center;
- line-height: 100px;
- }
- /*這句話代表鼠標(biāo)移動上去滾動會停止,類似于輪播*/
- #div:hover #ul {
- -webkit-animation-play-state: paused;
- }
- </style>
以上所述是小編給大家介紹的CSS3實(shí)現(xiàn)動畫滾動條代碼分享,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個(gè)煩人的點(diǎn),現(xiàn)在找到方法了,在此與大家分享下,感興趣的朋友可以參考下,以備不時(shí)之需2013-10-23CSS3實(shí)現(xiàn)鼠標(biāo)中輪滾動樹生長過程特效源碼
CSS3實(shí)現(xiàn)鼠標(biāo)中輪滾動樹生長的過程特效源碼是一款基于jQuery+CSS3+HTML5實(shí)現(xiàn)的鼠標(biāo)滾動視差效果。需要的朋友不妨前來下載源碼2016-05-12- 這篇文章主要介紹了CSS視差滾動效果的相關(guān)資料,需要的朋友可以參考下2016-01-28
- 這篇文章主要通過三種方法給大家分享css隱藏滾動條的方法,在此我比較推薦第二種方法,當(dāng)然也根據(jù)實(shí)際情況。對本文感興趣的朋友一起學(xué)習(xí)吧2015-11-18
純css3實(shí)現(xiàn)的圓球順時(shí)針滾動效果源碼
這是一款基于純css3實(shí)現(xiàn)的圓球順時(shí)針滾動效果源碼,由于采用純css3實(shí)現(xiàn)動畫效果,占用內(nèi)存極低,且使用方便。直接復(fù)制相關(guān)html以及css到你的頁面中即可。動畫呈順時(shí)針方向加2015-11-02- 這篇文章主要介紹了使用CSS3來實(shí)現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下2015-08-24
- 這篇文章主要介紹了css實(shí)現(xiàn)圖片橫向排列滾動效果,需要的朋友可以參考下2017-12-07