滚筒效果

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

安卓开发中非常炫的效果集合

安卓开发中非常炫的效果集合 这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始从网上收集各种特效资源。下面给大家一...
  • Yw59792649
  • Yw59792649
  • 2018年01月08日 11:31
  • 30

仿ios中pickerview控件类似滚桶的UI

现在做安卓开发的都越来越倾向于ios的控件UI界面,无非就是因为ios的组件看起来比安卓的原生控件更漂亮,致使我们开发安卓的都要自己自定义控件来达到类似ios的控件。今天给大家自定义一个仿ios中的p...
  • qq_32365567
  • qq_32365567
  • 2016年06月04日 11:01
  • 2567

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

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

android绘制一个圆柱的螺线曲线

好吧,其实这个问题是因为我想做一个小玩意的时候想要做一个效果需要用到螺线的一个效果,但是没人分享过,可能太简单了‘, 但是我是菜鸟,所以自己搞了两天,写了一个能实现的代码,有点乱,不过有注释,其实也...
  • q9977144
  • q9977144
  • 2013年09月15日 15:24
  • 1213

QML仿手机时间滚筒控件

QML仿手机时间滚筒控件注意里面的图片使用自己的图片代替 使用自己封装的TimePathView.qml、TimePathItem.qml 控件\效果图 DatePage 使用代...
  • WMX843230304WMX
  • WMX843230304WMX
  • 2017年07月04日 17:21
  • 479

孕妇白女士:滚筒洗衣机下排水规划更安康

选滚筒究竟选上排水好仍是下排水好?日前,跟着网络上对滚筒洗衣机“二次污染”疑问的持续评论,越来越多的花费者开端关心起洗衣机的排水疑问。欧美品牌均为上排水规划,亚洲品牌则上下排水均有,公说公有理婆说婆有...
  • u014524189
  • u014524189
  • 2014年04月10日 18:24
  • 2127

CSS3实现3D立体效果

CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及...
  • wonderful_life_mrchi
  • wonderful_life_mrchi
  • 2016年09月02日 17:04
  • 69832

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

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

卡萨帝洗衣机这场技术战重新定义了滚筒

文/曾响铃 2017年4月22日,“重新发明滚筒”2017卡萨帝洗衣机科技探寻之旅在东莞拉开帷幕。活动现场,卡萨帝旗下双子云裳、欧式云裳、复式云裳、幂级云裳、强力波洗衣机及抽屉洗碗机产品悉数亮相...
  • sinat_32970179
  • sinat_32970179
  • 2017年04月28日 16:24
  • 686

html5实现对试题图片批改效果,类似盖章效果

因项目功能需要,最近几天开始研究html5,实现对上传的试题图片进行批改对错,批改完保存批改后的图片功能。主要涉及到html5 canvas画布和js的相关知识点。 参考:http://www....
  • u013408979
  • u013408979
  • 2016年09月03日 15:30
  • 2348
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滚筒效果
举报原因:
原因补充:

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