《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. Dapper试用简例

    1.选择3.5以上框架在新建项目中引用Dapper.dll. 2.在后台写代码,代码写出来后感觉以前学的都白学了. 3. using Dapper; using System; using Syste ...

  2. Android 把从网络获取的图片缓存到内存中

    1:activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...

  3. Entity Framework with MySQL 学习笔记一(复杂类型 Complex Types)

    有时候我们希望在sql一个表里面的column, 一部分被分化成另一个class 典型的例子是 Address 直接看代码: [Table("member")] public cl ...

  4. rnqoj-28-合唱队形-最长上升子序列

    想当年大一的时候,一个最长上升子序列的问题使得我的罚时上升了不少....当年还是图样啊 这道题目本质就是求最长上升子序列 #include<stdio.h> #include<str ...

  5. 简单的新闻客户端APP开发（DCloud+thinkphp+scrapy）

    前端时间花了1个月左右,搞了个新闻APP,功能很简单,就是把页面版的新闻条目定时爬到后台数据库,然后用app显示出来. 1.客户端 使用了DCloud框架,js基本是个新手,从没写过像样的代码,htm ...

  6. js 获取10个不重复随机数

    var arr1 = new Array(); var arr2 = new Array(); for(var i = 0; i<20; i++){ arr1.push(i); } for(va ...

  7. Ajax请求用户控件（.ascx）404错误

  8. Java基础（十）内部类

    1.使用内部类的原因(3点) ①内部类方法可以访问该内部类定义所在的作用域中的数据,包括私有数据. ②内部类可以对同一个包中的其他类隐藏起来. ③当想要定义一个回调函数且不想编写大量代码时,使用匿名内 ...

  9. assertion的语法和语义

    ．1) 语法表示 在语法上,为了支持assertion,Java增加了一个关键字assert.它包括两种表达式,分别如下: assert expression1; assert expression1 ...

  10. [shell]Shell经常使用特殊符号

    符合 含义 && command1 && command2:命令1返回真(命令返回值 $? == 0)后,命令2才干被运行.能够用于if推断. cp 1.txt ../ ...