《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. SQL语句中output的用法

    在SQL语句中,output可以作为返回值来使用, 1.我们先看这个存储过程 代码: 1 set ANSI_NULLS ON  2 set QUOTED_IDENTIFIER ON  3 go  4 ...

  2. grunt serve Warning: Running "sass:server" (sass) task

    使用grunt serve运行时遇到一问题: y@y:ydkt$ grunt serve Running "serve" task Running "clean:serv ...

  3. Ubuntu14.04 weblogic11g集群环境测试

    在当前域下面新建两个服务器,服务器信息设置: server1:127.0.0.1:7010 server2:127.0.0.1:7020 第一步:新建服务器 (1)进入“服务器”,点击新建: (2)填 ...

  4. JSP标准库标签 ———C标签

    一.C标签    一] <c:out value="..." default="..." escapeXml="true">   ...

  5. Qt编程之Qt样例表（QSS）

    For a long time, Qt has allowed you to decorate your GUIs with CSS’ish style sheets. Inspired by the ...

  6. openwrt上wifi探针的实现

    openwrt上wifi探针的实现 探针是通过wifi搜集经过这个AP范围的手机的mac地址,没有什么深刻的东西,知乎上关于这个东西讨论的很多,有人觉得很有用,可以做很多增值的应用,有人觉得没啥用,不 ...

  7. 2012高校GIS论坛

    江苏省会议中心 南京·钟山宾馆(2012年4月21-22日) 以"突破与提升"为主题的"2012高校GIS论坛"将于4月在南京举行,由南京大学和工程中心共同承办 ...

  8. js跨越小结

    javascript跨域有几种情况: 1.基于同一父域的子域之间,如:a.c.com和b.c.com 2.基于不同的父域之间,如:www.a.com和www.b.com 3.端口的不同,如:www.a ...

  9. N次剩余

    $$求解x^n\equiv a(\%P),其中P是质数,0\leq x<P$$ 设$g$是$P$的原根 那么$g^0,g^1,...,g^{P-2}$和$1,2,...,P-1$是一一对应的. ...

  10. HBase 事务和并发控制机制原理

    作为一款优秀的非内存数据库,HBase和传统数据库一样提供了事务的概念,只是HBase的事务是行级事务,可以保证行级数据的原子性.一致性.隔离性以及持久性,即通常所说的ACID特性.为了实现事务特性, ...