先给大家一张效果图，看似简单，其实实现起来....那也是非常简单的~简单又实用

黑框里面的字体会自动滚动，形成滚动条，可以用于展示和提示，首先我们先要在body里面写上自己想要的文字，比如我想写：感觉好的请点击推荐

<body>

        <div id="div">

        <ul id="ul">

            <li>感</li>

            <li>觉</li>

            <li>好</li>

            <li>的</li>

            <li>请</li>

            <li>点</li>

            <li>击</li>

            <li>推</li>

            <li>荐</li>

        </ul>

        </div>

    </body>

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

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

        ul,li,ol{

            list-style: none;

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

        @-webkit-keyframes move {

                0% {

                    left:;

                }

                100% {

                    left: -400px;

                }

            }

       
/*以下是布局样式*/

        #div{

            width: 500px;

            height: 100px;

            margin: 100px auto;

            border: 5px solid green;

            position: relative;

            overflow: hidden;

        }

        #ul{

            position: absolute;

            padding:;

            margin-top: 0px;

            width: 185%;

            display: block;
/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，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;

        }

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

        #div:hover #ul {

        -webkit-animation-play-state: paused;

            }

    </style>

以上是实现滚动条的所有代码，觉得赞的人可以点击推荐谢谢~

css3实现动画滚动条的更多相关文章

  1. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  2. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  3. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  4. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  5. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  6. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  9. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

随机推荐

  1. [MySQL优化案例]系列 — 分页优化

    通常,我们会采用ORDER BY LIMIT start, offset 的方式来进行分页查询.例如下面这个SQL: SELECT * FROM `t1` WHERE ftype=1 ORDER BY ...

  2. C++ 对象创建的问题

    一.C++对象的创建: 对象创建的注意事项: 1.对象数组里的个数,就是创建对象的个数,普通数组一样:下标从0 到数组里数字 -1: 2.类名*  对象指针   <-->  这里只是一个指 ...

  3. NOIP2016 DAY2 T3 愤怒的小鸟

    传送门 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 (0,0)(0,0) 处,每次 Kiana 可以用它向第一象限发射一只红色的 ...

  4. CSS定位相关

    CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进 ...

  5. 从零开始创建一个 PHP 扩展

    创建一个扩展的基本步骤都有哪些.示例中,我们将实现如下功能: <?phpecho say();?> 输出内容: $ php ./test.php$ hello word 在扩展中实现一个s ...

  6. android 下载网络图片并缓存

    异步下载网络图片,并提供是否缓存至内存或外部文件的功能 异步加载类AsyncImageLoader public void downloadImage(final String url, final ...

  7. windows 禁用 magic mouse2 左右移动

    相信大部分程序员同志,只要用macbook都回装双系统的,本人也不例外,因为需要用到vs等很多开发工具. magic mouse2在osx上的表现本人不做评论,没用过几回,在win10上的表现太差劲了 ...

  8. 安全性测试AppScan工具使用实战

    1.打开appScan 2.点击创建新的扫描[这里我选的是常规扫描] 3.进入配置向导页面,点击下一步 4..进入扫描配置向导页面,url输入http://www.baidu.com(可以打开appS ...

  9. [bzoj3530][Sdoi2014]数数_AC自动机_数位dp

    数数 bzoj-3530 Sdoi-2014 题目大意:给你一个整数集合,求所有不超过n的正整数,是的它的十进制表示下不能再一段等于集合中的任意数. 注释:$1\le n \le 1200$,$1\l ...

  10. poj2135(简单的最小费用流问题)

    题目链接:http://poj.org/problem?id=2135 Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...