Стильный адаптивный переключатель страниц на CSS3
Классный адаптивный переключатель страниц для вашего сайта, который выполнен на чистом CSS и использует CSS3 анимации
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
.pagination { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 17%, white 83%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); height: 50px; text-align: center; width: 100%; margin-top: 25%; display: inline-block; list-style: none; } .pagination:before, .pagination:after { background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 17%, rgba(0, 0, 0, 0.1) 83%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); content: ""; height: 1px; left: 0; position: absolute; width: 100%; } .pagination:before { margin-top: -1px; } .pagination:after { margin-top: 50px; } @-webkit-keyframes hoverAnimation { from { opacity: 1; } to { opacity: 0; } } @keyframes hoverAnimation { from { opacity: 1; } to { opacity: 0; } } .pagination li { display: inline-block; padding: 5px; } .pagination li:first-child { border: none; } .pagination li a { text-decoration: none; } .pagination button, .pagination span, .pagination a { background: none; border: none; border-radius: 50%; box-sizing: border-box; color: rgba(0, 0, 0, 0.6); display: block; font-size: 16px; height: 40px; line-height: 40px; min-width: 40px; padding: 0; } .pagination .page-item { outline: none; position: relative; transition: all 170ms linear; } .pagination .page-item:before { background: rgba(0, 0, 0, 0.2); border-radius: 50%; content: ""; cursor: pointer; height: 0; left: 50%; opacity: 0; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all 170ms linear; top: 50%; width: 0; } .pagination .page-item:hover:not(.active) { color: black; } .pagination .page-item:hover:not(.active):before { -webkit-animation: hoverAnimation 510ms linear forwards; animation: hoverAnimation 510ms linear forwards; height: 40px; width: 40px; } .pagination .page-item.active { background: rgba(0, 0, 0, 0.1); color: black; } .pagination .prev, .pagination .next { font-size: 14px; } |
2#: HTML код вашего переключателя должен быть примерно таким:
1 2 3 4 5 6 |
<ul class="pagination"> <li class="page-item disabled"><span class="page-link">‹</span></li> <li class="page-item active"><span class="page-link">1</span></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#" rel="next">›</a></li> </ul> |