《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. arclist标签和list标签区别

    很多站长朋友在刚入门织梦的时候对织梦的标签存在很多的困惑,关于arclist标签和list标签,甚至不知道啥时候用arclist,啥时用list标签.arclist 为自由列表,全局模板中都生效,一般 ...

  2. twisted(3)--再谈twisted

    上一章,我们直接写了一个小例子来从整体讲述twisted运行的大致过程,今天我们首先深入一些概念,在逐渐明白这些概念以后,我们会修改昨天写的例子. 先看下面一张图: 这个系列的第一篇文章,我们已经为大 ...

  3. 对PHP安全有帮助的一些函数

    安全一直是一个在编程语言中非常值得去关注的方面.在任何一种成熟的编程语言中都有合适的办法来保证程序的安全性,在现代的 WEB 开发中 安全一直是一个在编程语言中非常值得去关注的方面.在任何一种成熟的编 ...

  4. easyui最小化后停留在页面的右下角

    0.此方法没有什么技术含量,纯属于自己瞎想的!如果有的好方法,请留言告之谢谢!! 1.直接上代码: $('#winId').window({ onMinimize: function () { //最 ...

  5. orientationchange的兼容性

    移动webapp监测屏幕旋转时常用onorientationchange事件,用此事件获取改变后的屏幕尺寸时需要注意: 1. iphone中,可立即获取改变后的屏幕尺寸. 2. android中,获取 ...

  6. java的CalssLoader

    类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1.0 就出现了,最初是为了满足 Ja ...

  7. 实现QQslidingMenu侧滑效果学习笔记

    声明:只是自己的学习笔记,所以,只作为博友的参考,不喜勿喷 实现思路: 自定义继承HorizontalScrollView的控件 项目github地址: https://github.com/ysno ...

  8. Red Gate - SQL Source Control实现对SQL SERVER 的源代码控制

    原文地址:http://bbs.csdn.net/topics/350165431 SQL Server 一直没有一款很好的源码控制器,之前自己曾尝试自己写一个,将所有的 脚本 自动生成到某一目录下, ...

  9. Codeforces Round #FF (Div. 2)__E. DZY Loves Fibonacci Numbers (CF447) 线段树

    http://codeforces.com/contest/447/problem/E 题意: 给定一个数组, m次操作, 1 l r 表示区间修改, 每次 a[i] +  Fibonacci[i-l ...

  10. 素数与素性测试（Miller-Rabin测试）

    转载自Matrix大牛的博客 把代码翻译成C++ http://www.matrix67.com/blog/archives/234 题目链接: http://hihocoder.com/proble ...