js相册特效代码,怎样用JavaScript实现相册效果

js相册特效代码,怎样用JavaScript实现相册效果详细介绍

html, body { margin: 0; padding: 0; background-color: #29454d; /*禁止文字被选中*/ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; overflow: hidden; } .box { position: relative; height: 500px; width: 500px; margin: 100px auto; transform-style: preserve-3d; perspective: 2000px; } .di { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; transform: translate(-50%, -50%) rotatex(90deg); transform-style: preserve-3d; } .z { position: relative; height: 200px; width: 200px; border-radius: 50%; transform-style: preserve-3d; /*transform: rotatez(1deg);*/ } p { margin: 0; position: absolute; top: 0; /*为了保证圆心在父盒子中心，父盒子旋转时圆心稳定，所以设置left*/ left: 25px; height: 200px; width: 150px; border: 2px solid #fd7068; box-sizing: border-box; background-color: #ffffff; background-size: cover; background-position: center; background-repeat: no-repeat; /*opacity: .7;*/ font-size: 10px; line-height: 200px; text-align: center; /*box-shadow: 0 0 100px #16ff8b;*/ /*倒影，不兼容*/ -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5)); box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5)); /*backface-visibility: hidden;*/ }