zoukankan      html  css  js  c++  java
  • css3滚动提示

    《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;
                 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>
  • 相关阅读:
    Spring入门第二十九课
    Spring入门第二十八课
    Spring入门第二十七课
    Spring入门第二十六课
    Spring入门第二十五课
    Spring入门第二十四课
    Spring入门第二十三课
    Spring入门第二十二课
    Spring入门第二十一课
    Spring入门第二十课
  • 原文地址:https://www.cnblogs.com/scnuwangjie/p/6053519.html
Copyright © 2011-2022 走看看