JS无刷新实现的分页代码箭头特效.doc

JS无刷新实现的分页代码箭头特效 !DOCTYPE html html head meta charset=UTF-8 titleJS实现的无刷新，分页数代码特效/title stylebody { background: #33ab83; }郑州悦美整形美容医院 郑州展览公司 button { -webkit-appearance: none; background: transparent; border: 0; } .paginate { position: relative; margin: 10px; width: 50px; height: 50px; cursor: pointer; transform: translate3d(0, 0, 0); position: absolute; top: 50%; margin-top: -20px; -webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2)); } .paginate i { position: absolute; top: 40%; left: 0; width: 50px; height: 5px; border-radius: 2.5px; background: #fff; transition: all 0.15s ease; } .paginate.left { right: 58%; } .paginate.left i { transform-origin: 0% 50%; } .paginate.left i:first-child { transform: translate(0, -1px) rotate(40deg); } .paginate.left i:last-child { transform: translate(0, 1px) rotate(-40deg); } .paginate.left:hover i:first-child { transform: translate(0, -1px) rotate(30deg); } .paginate.left:hover i:last-child { transform: translate(0, 1px) rotate(-30deg); } .paginate.left:active i:first-child { transform: translate(1px, -1px) rotate(25deg); } .paginate.left:active i:last-child { transform: translate(1px, 1px) rotate(-25deg); } .paginate.left[data-state=disabled] i:first-child { transform: translate(-5px, 0) rotate(0deg); } .paginate.left[data-state=disabled] i:last-child { transform: translate(-5px, 0) rotate(0deg); } .paginate.left[data-state=disabled]:hover i:first-child { transform: translate(-5px, 0) rotate(0deg); } .paginate.left[data-state=disabled]:hover i:last-child { transform: translate(-5px, 0) rotate(0deg); } .paginate.right { left: 58%; } .paginate.right i { transform-origin: 100% 50%; } .paginate.right i:first-child { transform: translate(0, 1px) rotate(40deg); } .paginate.right i:last-child { transform: translate(0, -1px) rotate(-40deg); } .paginate.right:hover i:first-child { transform: translate(0, 1px) rotate(30deg); } .paginate.right:ho