《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. bayes

    from numpy import * import time starttime = time.time() def loadDataSet(): postingList = [['my', 'do ...

  2. jquery-qrcode在线生成二维码

    通过bower进行获取: y@y:ydkt$ bower install jquery-qrcode --save bower not-cached git://github.com/gcusnieu ...

  3. LeetCode_Decode Ways

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  4. Android双击返回键退出Activity的两种方法

    在开发应用程序的时候,有一种功能是非常常用到的,那就是迅速双击返回按钮,然后实现退出Activity的功能.本人在网上看了很多资料代码,总结起来,主要有两种比较好的方式.一种是开线程延时执行,一种是记 ...

  5. Android listview局部刷新和模拟应用下载(zhu)

    在android开发中,listview是比较常用的一个组件,在listview的数据需要更新的时候,一般会用notifyDataSetChanged()这个函数,但是它会更新listview中所有可 ...

  6. shell中使用sqlplus及调试相关

    五.为了安全要求每次执行shell都手工输入密码$ vi test5.sh #!/bin/bashecho -n "Enter password for u_test:"read ...

  7. /usr/lib64/python2.6/site-packages/pycurl.so: undefined symbol: CRYPTO_set_locking_callback

    [root@frontend01 yum.repos.d]# cd /etc/yum.repos.d;wget http://rpms.adiscon.com/v8-stable/rsyslog.re ...

  8. BZOJ3394: [Usaco2009 Jan]Best Spot 最佳牧场

    3394: [Usaco2009 Jan]Best Spot 最佳牧场 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 11  Solved: 9[Sub ...

  9. 2014-07-28　使用Axure RP进行手机端BBS的原型设计

    今天是在吾索实习的第14天.因本公司的微信公众号需要有一个对外的技术交流平台,所以我们小组打算设计一个手机端的BBS以满足其要求.首先,我们需要做的是进行数据库设计与原型设计,然后提交给经理验收,看看 ...

  10. html+css显示代码书写版式

    由于要显示行数,所以需选用html的列表标签ol,以下代码可以显示代码书写版式的效果: <style> .code-part { background: yellow; } .code-p ...