滚筒效果

原创 2016年08月30日 19:28:58
  <!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>

相关文章推荐

使用ListView实现滚筒选择器效果

Android和ios应用开发虽然大同小异,但是对于原生sdk提供的组件来说,ios要相对美观点,但是Android 的组件也是可以高度自定义的,基本上ios有的Android都能自定义达到相同的效果...

css3动画简易制作滚筒效果

  • 2016年08月06日 16:34
  • 11KB
  • 下载

QML仿手机时间滚筒控件

QML仿手机时间滚筒控件注意里面的图片使用自己的图片代替 使用自己封装的TimePathView.qml、TimePathItem.qml 控件\效果图 DatePage 使用代...

全自动滚筒式丝网印刷机程序

  • 2009年04月15日 11:38
  • 240B
  • 下载

全自动滚筒式丝网印刷机程序

  • 2009年04月15日 11:37
  • 193B
  • 下载

滚筒流水线的承载性能决定于它的结构形式

滚筒流水线是一种比较适合输送较大货物的输送设备,它是由机架、辊筒、支腿等组成。常用于各类箱、包、托盘等物品的输送,对于散料、小件物品或不规则的物品则需放在托盘上或周转箱内输送。它可以输送单件重量很大的...

小日本设计的滚筒输送线

  • 2014年09月19日 09:42
  • 308KB
  • 下载

UI第二章 UIPickerView(滚筒式)

滚筒式数据选择器,可以多列

  • 2016年01月04日 13:32
  • 2.75MB
  • 下载

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

  • 2014年03月20日 13:06
  • 1.14MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滚筒效果
举报原因:
原因补充:

(最多只允许输入30个字)