包磊磊的博客

微信------18800171167

滚筒效果
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #wrap{width: 320px;border: 1px solid #999;margin: 20px auto;}
  #wrap div{width: 100%;height: 40px;text-align: center;border-bottom: 1px solid lightgray;background: cyan;
  transform: rotateX(90deg);
  transition:all 1s cubic-bezier(1, 1.75, 0.88,-0.08);
  transform-origin: top;
  }
  span{display: block;line-height: 40px;}
   
  /*#wrap:hover div{transform: rotateX(0);}*/
   
  </style>
  </head>
  <body>
  <div id="wrap">
  <div><span>sapn1</span></div>
  <div><span>sapn2</span></div>
  <div><span>sapn3</span></div>
  <div><span>sapn4</span></div>
  <div><span>sapn5</span></div>
  <div><span>sapn6</span></div>
  <div><span>sapn7</span></div>
  <div><span>sapn8</span></div>
  <div><span>sapn9</span></div>
  <div><span>sapn10</span></div>
  <div><span>sapn11</span></div>
  <div><span>sapn12</span></div>
  </div>
  </body>
  <script type="text/javascript">
  var wrap = document.getElementById('wrap');
  var divs = wrap.getElementsByTagName('div');
   
  wrap.onclick = function(){
  for (var i = 0; i < divs.length; i++) {
  divs[i].style.transform = 'rotateX(0)';
  divs[i].style.transitionDelay = i*0.3 + 's';
  }
  }
   
   
  </script>
  </html>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34629352/article/details/52372250
想对作者说点什么? 我来说一句

css3动画简易制作滚筒效果

2016年08月06日 11KB 下载

仿IOS滚筒控件

2013年01月28日 410KB 下载

数字翻滚抽奖特效js

2016年12月05日 53KB 下载

滚筒电脑板调速工艺2011-3(2)

2014年03月20日 1.14MB 下载

没有更多推荐了,返回首页

不良信息举报

滚筒效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭