• 注册
  • 代码教程 代码教程 关注:6 内容:36

    CSS内容平滑过渡!可以自定义由左向右滑动或由下向上拉出!

  • 查看作者
  • 打赏作者
  • 9 渡劫 后期

    CSS内容平滑过渡!可以自定义由左向右滑动或由下向上拉出!

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    
    
    <div> <ul> <li>linear:平滑过渡。</li>
    </ul>
    </div>
    
    <style>
    .aa {
        width: 220px;
    }
    .aa ul li {
        position: relative;
        left: 8px;
        width: 220px;
        margin: 1px 5px;
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #eee;
        color: #000;
        -moz-transition-property: left;
        -moz-transition-duration: .5s;
        -webkit-transition-property: left;
        -webkit-transition-duration: .5s;
        -o-transition-property: left;
        -o-transition-duration: .5s;
        transition-property: left;
        transition-duration: .5s;
        list-style: none;
    }
    .aa ul li:hover {
        left: 50px;
    }
    .aa ul li:nth-child(2) {
        -moz-transition-timing-function: ease;
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
    }
    </style>
    
    
    
    
    </body>
    </html>

    请登录之后再进行评论

    登录
  • 任务
  • 偏好设置
  • 到底部
  • 帖子间隔 侧栏位置: