zoukankan      html  css  js  c++  java
  • css3 实现列表滚动展示

    农行业务有个需求是展示获取的数据滚动展示,我用css3动画将数据进行展示,代码如下:

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    @-webkit-keyframes move {
    0% {
    top: 0;
    }

    100% {
    top: -500px;
    }
    }

    #wrap {
    100px;
    height: 100px;
    border: 1px solid #000;
    position: relative;
    margin: 100px auto;
    overflow: hidden;
    }

    #list {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    -webkit-animation: 5s move infinite linear;
    200%;
    }

    #list li {
    list-style: none;
    98px;
    height: 98px;
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    font: 50px/98px Arial;
    text-align: center;
    }

    #wrap:hover #list {
    -webkit-animation-play-state: paused;
    }
    </style>
    </head>

    <body>
    <div id="wrap">
    <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>
    </body>

    </html>
  • 相关阅读:
    原型模式
    简单工厂模式与工厂方法模式
    监听器 Listener
    代理模式
    装饰模式
    软件设计的原则
    事务的特性和隔离级别
    JDBC事务(三)ThreadLocal绑定Connection
    JDBC事务(二)转账示例
    JDBC事务(一)
  • 原文地址:https://www.cnblogs.com/zhx119/p/11095061.html
Copyright © 2011-2022 走看看