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


Posted in HTML / CSS onAugust 03, 2016

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

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

CSS Code复制内容到剪贴板
  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-stylenone;   
  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.             width500px;   
  16.             height100px;   
  17.             margin100px auto;   
  18.             border5px solid green;   
  19.             positionrelative;       
  20.             overflowhidden;       
  21.         }   
  22.         #ul{   
  23.             positionabsolute;           
  24.             padding: 0;   
  25.             margin-top0px;       
  26.             width: 185%;   
  27.             displayblock;/*这句话也是至关重要的,少了这句话也不会滚动,我给他四个值,3s代表三秒之内完成滚动,move这个名字对应着上面时间分段的名字,infinite代表循环滚动,linear表示匀速滚动*/  
  28.             -webkit-animation: 3s move infinite linear;   
  29.         }   
  30.         #ul li{   
  31.             floatleft;   
  32.             backgroundblack;   
  33.             colorwhite;   
  34.             margin-left1px;   
  35.             width100px;   
  36.             height100px;       
  37.             text-aligncenter;   
  38.             line-height100px;   
  39.         }   
  40.         /*这句话代表鼠标移动上去滚动会停止,类似于轮播*/  
  41.         #div:hover #ul {   
  42.         -webkit-animation-play-state: paused;   
  43.             }   
  44.     </style>   

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

HTML / CSS 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
You might like
PHP文件上传实例详解!!!
2007/01/02 PHP
php目录管理函数小结
2008/09/10 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
小加工厂管理制度
2014/01/21 职场文书
护士求职信
2014/07/05 职场文书
机电一体化专业求职信
2014/07/22 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
自荐信大全
2019/03/21 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
介绍一下28个JS常用数组方法
2022/05/06 Javascript