码迷,mamicode.com
首页 > Web开发 > 详细

奇妙的滚动css+html

时间:2017-10-11 18:17:23      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:实例   content   gif   text   com   tran   index   form   pos   

技术分享

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GetUserMedia实例</title>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
    <style>
        #test {height: 60px;width: 40px;margin: 0 0 0 150px;overflow: hidden;background-color: #32db64;position: relative;font-size: 12px;}
        #test span{display: inline-block;height: 20px;width: 40px;text-align: center}
        .box{position: absolute;left: 0;top: 20px;height: 20px;width: 100%;overflow: hidden;z-index: 5;background-color: #f53d3d;}
        .box .boxs{position: relative;top: -20px;font-size: 20px;line-height: 20px;}
        .boxs{transform: translateY(0px);
            -webkit-transition: all 3s;
            -moz-transition: all 3s;
            -ms-transition: all 3s;
            -o-transition: all 3s;
            transition: all 3s;}
        .boxs-active{transform: translateY(-140px)}
    </style>
</head>
<body>
    <div id="test">
        <div class="box">
            <div class="boxs">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
                <span>0</span>
            </div>
        </div>
        <div  class="boxs">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>0</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    var test = document.getElementById(‘test‘);
    var box = document.querySelectorAll(‘.boxs‘);
    setTimeout(function (args) {
        box.forEach(function (v) {
            v.className = ‘boxs-active boxs‘
        })
    },500)

</script>

</html>

  

奇妙的滚动css+html

标签:实例   content   gif   text   com   tran   index   form   pos   

原文地址:http://www.cnblogs.com/jiebba/p/7651670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!