《css揭秘》书中，滚动提示的实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Title</title>

    <style>

        ul {

            display: inline-block;

            overflow: auto;

            width: 7.2em;

            height: 7em;

            border: 1px solid silver;

            padding: .3em .5em;

            list-style: none;

            margin-top: 2em;

            font: 100 200%/1.6 'Frutiger LT Std', sans-serif;

            background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,

                         radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,

                         linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,

                         radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px;

            background-repeat: no-repeat;

            background-attachment: local, scroll, local, scroll;

            margin-top: 30px;

        }

    </style>

</head>

<body>

<ul>

    <li>Ada Catlace</li>

    <li>Alan Purring</li>

    <li>Schrödingcat</li>

    <li>Tim Purrners-Lee</li>

    <li>WebKitty</li>

    <li>Json</li>

    <li>Void</li>

    <li>Neko</li>

    <li>NaN</li>

    <li>Cat5</li>

    <li>Vector</li>

</ul>

</body>

</html>

css3滚动提示的更多相关文章

  1. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  2. css3滚动效果

    .css{ -webkit-transition-duration: .3s;    transition-duration: .3s; }

  3. H5横向滚动提示

    <marquee>啦啦啦,Hello World</marquee>

  4. 微信小程序-通知公告滚动提示

    wxml如下: <view class='scroll_view_border'> <view class="srcoll_view" bindtap=" ...

  5. CSS3定时提示动画特效

    在线演示 本地下载

  6. iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

    https://github.com/jaywcjlove/iNotify     JS 实现浏览器的 title 闪烁.滚动.声音提示.chrome.Firefox.Safari等系统通知. 这是重 ...

  7. CSS3新特性应用之用户体验

    一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...

  8. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  9. 【比赛打分展示双屏管理系统-加强版】的两个ini配置文件功能解释及排行榜滚动界面的简答配置等

    加强版目录下有两个ini文件,功能解释如下: 1. ScoreTip.ini: bScoreTip:如果为1,可以启用 回避 功能 或 高低分差值超出 iScoreRange 的 提示功能. iSco ...

随机推荐

  1. 【创建型】Prototype模式

    原型模式主要是用原型实例指定创建原型对象的种类,并且通过拷贝原型创建新对象.最简单的理解就是克隆.就如cocos2d-x中的 class Clonable::clone();该模式的主要目的是可以在运 ...

  2. debug 输出 以及宏定义--备

    使用NSLog的一个风险是:它的运行会占用时间和设备资源. 所以在编译版本前一定不要有nslog. 同时当你的工程中有很多log 输出的时候 查找起来很不方便 ,下面介绍一种方法 可以使我们事半功倍. ...

  3. Google Noto Sans CJK 字体

    下载链接:https://code.google.com/p/noto/source/browse/third_party/noto_cjk 等自己安装完成,再来个体验说明.

  4. Android UI 调试常用工具（Dump view UI hierarchy for Automator）

    UI调试时程序员比较头疼的问题:有时候经常会被1dp.2dp的问题,搞得无言以对(Android开发深有体会) 下面介绍一个在实际开发过程中常用的一个调试工具,可以精确到每个View在屏幕中的绝对位置 ...

  5. notes: the architecture of GDB

    1. gdb structure at the largest scale,GDB can be said to have two sides to it:1. The "symbol si ...

  6. Codeforces 23E Tree

    http://codeforces.com/problemset/problem/23/E 题意:给一个树,求砍断某些边,使得所有联通块大小的乘积最大.思路:f[i][j]代表当前把j个贡献给i的父亲 ...

  7. 在VC中检测内存泄漏

    声明:checkleaks.h和checkleaks.cpp这两个文件中的代码是在网上COPY的,但原来那个网站现在却找不到了 所以,这篇文章不算完全原创,呵呵. 就当作是一个存档吧 先上代码: // ...

  8. Oracle extent

    extent 上的块 物理上绝对连续 多个连续的block组成一个extent 不连续怎么多块读? Oracle 给表分配的单位是extent 去做 全表扫描的时候 以块为单位,按照extent来读取 ...

  9. 【转】ActionBar的基本用法

    原文网址:http://irtutsk.iteye.com/blog/2117707 ActionBar的组成: [1]AppIcon:标题区,显示应用程序图标和标题,也可以自定义. [2]ViewC ...

  10. Angular.js VS. Ember.js：谁将成为Web开发的新宠？

    这篇博文陈述的非常好,比较全面的剖析了Angular.js与Ember.js,下面的链接,供学习与参考: http://www.csdn.net/article/2013-09-09/2816880- ...