原生js模仿ios时间日期滚动选择效果代码
代码语言：html
所属分类：选择器
代码描述：原生js模仿ios时间日期滚动选择效果代码
代码标签： 原生 js 模仿 ios 时间 日期 滚动 选择
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
@charset "UTF-8";
body {
font-family: Arial, "Hiragino Sans GB", 冬青黑, "Microsoft YaHei", 微软雅黑, SimSun, 宋体, Helvetica, Tahoma, "Arial sans-serif";
background: #000;
}
.select-wrap {
position: relative;
height: 100%;
text-align: center;
overflow: hidden;
font-size: 20px;
color: #ddd;
}
.select-wrap:before, .select-wrap:after {
position: absolute;
z-index: 1;
display: block;
content: "";
width: 100%;
height: 50%;
}
.select-wrap:before {
top: 0;
background-image: linear-gradient(to bottom, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0));
}
.select-wrap:after {
bottom: 0;
background-image: linear-gradient(to top, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0));
}
.select-wrap .select-options {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
transform-style: preserve-3d;
margin: 0 auto;
display: block;
transform: translateZ(-150px) rotateX(0deg);
-webkit-font-smoothing: subpixel-antialiased;
color: #666;
}
.select-wrap .select-options .select-option {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
-webkit-font-smoothing: subpixel-antialiased;
}
.select-wrap .select-options .select-option:nth-child(1) {
transform: rotateX(0deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(2) {
transform: rotateX(-18deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(3) {
transform: rotateX(-36deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(4) {
transform: rotateX(-54deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(5) {
transform: rotateX(-72deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(6) {
transform: rotateX(-90deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(7) {
transform: rotateX(-108deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(8) {
transform: rotateX(-126deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(9) {
transform: rotateX(-144deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(10) {
transform: rotateX(-162deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(11) {
transform: rotateX(-180deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(12) {
transform: rotateX(-198deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(13) {
transform: rotateX(-216deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(14) {
transform: rotateX(-234deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(15) {
transform: rotateX(-252deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(16) {
transform: rotateX(-270deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(17) {
transform: rotateX(-288deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(18) {
transform: rotateX(-306deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(19) {
transform: rotateX(-324deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(20) {
transform: rotateX(-342deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(21) {
transform: rotateX(-360deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(22) {
transform: rotateX(-378deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(23) {
transform: rotateX(-396deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(24) {
transform: rotateX(-414deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(25) {
transform: rotateX(-432deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(26) {
transform: rotateX(-450deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(27) {
transform: rotateX(-468deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(28) {
transform: rotateX(-486deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(29) {
transform: rotateX(-504deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(30) {
transform: rotateX(-522deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(31) {
transform: rotateX(-540deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(32) {
transform: rotateX(-558deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(33) {
transform: rotateX(-576deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(34) {
transform: rotateX(-594deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(35) {
transform: rotateX(-612deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(36) {
transform: rotateX(-630deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(37) {
transform: rotateX(-648deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(38) {
transform: rotateX(-666deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(39) {
transform: rotateX(-684deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(40) {
transform: rotateX(-702deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(41) {
transform: rotateX(-720deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(42) {
transform: rotateX(-738deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(43) {
transform: rotateX(-756deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(44) {
transform: rotateX(-774deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(45) {
transform: rotateX(-792deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(46) {
transform: rotateX(-810deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(47) {
transform: rotateX(-828deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(48) {
transform: rotateX(-846deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(49) {
transform: rotateX(-864deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(50) {
transform: rotateX(-882deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(51) {
transform: rotateX(-900deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(52) {
transform: rotateX(-918deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(53) {
transform: rotateX(-936deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(54) {
transform: rotateX(-954deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(55) {
transform: rotateX(-972deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(56) {
transform: rotateX(-990deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(57) {
transform: rotateX(-1008deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(58) {
transform: rotateX(-1026deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(59) {
transform: rotateX(-1044deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(60) {
transform: rotateX(-1062deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(61) {
transform: rotateX(-1080deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(62) {
transform: rotateX(-1098deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(63) {
transform: rotateX(-1116deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(64) {
transform: rotateX(-1134deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(65) {
transform: rotateX(-1152deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(66) {
transform: rotateX(-1170deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(67) {
transform: rotateX(-1188deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(68) {
transform: rotateX(-1206deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(69) {
transform: rotateX(-1224deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(70) {
transform: rotateX(-1242deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(71) {
transform: rotateX(-1260deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(72) {
transform: rotateX(-1278deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(73) {
transform: rotateX(-1296deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(74) {
transform: rotateX(-1314deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(75) {
transform: rotateX(-1332deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(76) {
transform: rotateX(-1350deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(77) {
transform: rotateX(-1368deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(78) {
transform: rotateX(-1386deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(79) {
transform: rotateX(-1404deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(80) {
transform: rotateX(-1422deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(81) {
transform: rotateX(-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0