Пример:
••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
HTML:
|
1 2 3 |
<div class="dot-bg"> <span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span> </div> |
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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 |
.dot-bg { display: grid; cursor: crosshair; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); margin: 0; padding: 0; place-items: center; width: 100%; height: 500px; } .dot-bg span { align-items: center; display: flex; height: 100%; justify-content: center; position: relative; user-select: none; width: 100%; font-size: 18px; font-family: Verdana, sans-serif; } .dot-bg span:before, .dot-bg span:after { content: ''; height: 4px; left: 0; margin: auto; position: absolute; right: 0; transform: scaleX(0); transition: transform 800ms 2s cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; z-index: -1; } .dot-bg span:after { height: 100%; width: 4px; transform: scaleY(0); } .dot-bg span:nth-child(1n) { color: #81d08b; } .dot-bg span:nth-child(1n):before, .dot-bg span:nth-child(1n):after { background: #81d08b; } .dot-bg span:nth-child(2n) { color: #9d80dd; } .dot-bg span:nth-child(2n):before, .dot-bg span:nth-child(2n):after { background: #9d80dd; } .dot-bg span:nth-child(3n) { color: #99cec2; } .dot-bg span:nth-child(3n):before, .dot-bg span:nth-child(3n):after { background: #99cec2; } .dot-bg span:nth-child(4n) { color: #db9a65; } .dot-bg span:nth-child(4n):before, .dot-bg span:nth-child(4n):after { background: #db9a65; } .dot-bg span:nth-child(5n) { color: #7bd890; } .dot-bg span:nth-child(5n):before, .dot-bg span:nth-child(5n):after { background: #7bd890; } .dot-bg span:nth-child(6n) { color: #b7bb6c; } .dot-bg span:nth-child(6n):before, .dot-bg span:nth-child(6n):after { background: #b7bb6c; } .dot-bg span:nth-child(7n) { color: #94d2a4; } .dot-bg span:nth-child(7n):before, .dot-bg span:nth-child(7n):after { background: #94d2a4; } .dot-bg span:nth-child(8n) { color: #97d68c; } .dot-bg span:nth-child(8n):before, .dot-bg span:nth-child(8n):after { background: #97d68c; } .dot-bg span:nth-child(9n) { color: #bac9c6; } .dot-bg span:nth-child(9n):before, .dot-bg span:nth-child(9n):after { background: #bac9c6; } .dot-bg span:nth-child(10n) { color: #d4748e; } .dot-bg span:nth-child(10n):before, .dot-bg span:nth-child(10n):after { background: #d4748e; } .dot-bg span:nth-child(11n) { color: #6aafcb; } .dot-bg span:nth-child(11n):before, .dot-bg span:nth-child(11n):after { background: #6aafcb; } .dot-bg span:nth-child(12n) { color: #8794b3; } .dot-bg span:nth-child(12n):before, .dot-bg span:nth-child(12n):after { background: #8794b3; } .dot-bg span:nth-child(13n) { color: #b5d96e; } .dot-bg span:nth-child(13n):before, .dot-bg span:nth-child(13n):after { background: #b5d96e; } .dot-bg span:nth-child(14n) { color: #d189b9; } .dot-bg span:nth-child(14n):before, .dot-bg span:nth-child(14n):after { background: #d189b9; } .dot-bg span:nth-child(15n) { color: #acd1af; } .dot-bg span:nth-child(15n):before, .dot-bg span:nth-child(15n):after { background: #acd1af; } .dot-bg span:nth-child(16n) { color: #d2de9a; } .dot-bg span:nth-child(16n):before, .dot-bg span:nth-child(16n):after { background: #d2de9a; } .dot-bg span:nth-child(17n) { color: #8bc4a7; } .dot-bg span:nth-child(17n):before, .dot-bg span:nth-child(17n):after { background: #8bc4a7; } .dot-bg span:nth-child(18n) { color: #86ae91; } .dot-bg span:nth-child(18n):before, .dot-bg span:nth-child(18n):after { background: #86ae91; } .dot-bg span:nth-child(19n) { color: #b099c7; } .dot-bg span:nth-child(19n):before, .dot-bg span:nth-child(19n):after { background: #b099c7; } .dot-bg span:nth-child(20n) { color: #d8c59c; } .dot-bg span:nth-child(20n):before, .dot-bg span:nth-child(20n):after { background: #d8c59c; } .dot-bg span:nth-child(21n) { color: #7373bc; } .dot-bg span:nth-child(21n):before, .dot-bg span:nth-child(21n):after { background: #7373bc; } .dot-bg span:nth-child(22n) { color: #da8ede; } .dot-bg span:nth-child(22n):before, .dot-bg span:nth-child(22n):after { background: #da8ede; } .dot-bg span:nth-child(23n) { color: #d0958c; } .dot-bg span:nth-child(23n):before, .dot-bg span:nth-child(23n):after { background: #d0958c; } .dot-bg span:nth-child(24n) { color: #999476; } .dot-bg span:nth-child(24n):before, .dot-bg span:nth-child(24n):after { background: #999476; } .dot-bg span:nth-child(25n) { color: #d29498; } .dot-bg span:nth-child(25n):before, .dot-bg span:nth-child(25n):after { background: #d29498; } .dot-bg span:hover:before, .dot-bg span:hover:after { transition-duration: 80ms; transition-delay: 0s; } .dot-bg span:hover:before { transform: scaleX(1); } .dot-bg span:hover:after { transform: scaleY(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 |
.dot-bg { display: grid; cursor: crosshair; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); margin: 0; padding: 0; place-items: center; width: 100%; height: 500px; } .dot-bg span { align-items: center; display: flex; height: 100%; justify-content: center; position: relative; user-select: none; width: 100%; font-size: 20px; font-family: Verdana, sans-serif; } .dot-bg span:before, .dot-bg span:after { content: ''; height: 4px; left: 0; margin: auto; position: absolute; right: 0; transform: scaleX(0); transition: transform 800ms 2s cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; z-index: -1; } .dot-bg span:after { height: 100%; width: 4px; transform: scaleY(0); } .dot-bg span { color: #BFE2FF; } .dot-bg span:before, .dot-bg span:after { background: #337AB7; } .dot-bg span:hover:before, .dot-bg span:hover:after { transition-duration: 80ms; transition-delay: 0s; } .dot-bg span:hover:before { transform: scaleX(1); } .dot-bg span:hover:after { transform: scaleY(1); } |
В результате получится так:
••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
За основу взят код, найденный на codepen.io у пользователя Ryan Mulligan
Добавить комментарий: