Анимированный прелоадер из кружков на чистом CSS3
Необычный анимированный прелоадер для вашего сайта, который выполнен на чистом 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 |
#btn--yp { box-sizing: content-box; position: fixed; z-index: 9; bottom: 1em; right: 1em; border: solid 1em transparent; width: 4.625em; height: 3.25em; font: 16px/ 1.25 trebuchet ms, sans-serif; text-indent: 200vw; text-shadow: none; filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0); transition: .5s; white-space: nowrap; } #btn--yp:before { box-sizing: inherit; position: absolute; left: 0; bottom: 100%; margin: 1em -.5em; padding: .5em; width: 100%; border-radius: 5px; background: #e8e0e0; color: #000; text-align: center; text-decoration: none; text-indent: 0vw; white-space: normal; animation: float 1s ease-in-out infinite alternate; content: attr(data-txt); } #btn--yp:hover, #btn--yp:focus { outline: none; filter: grayscale(0) drop-shadow(0 0 1px crimson); } @keyframes float { to { transform: translateY(0.75em); } } body { display: grid; place-content: center; overflow: hidden; margin: 0; height: 100vh; background: #222; } .ring { --f: 1; width: 13em; height: 13em; transform: scale(var(--f)); opacity: var(--f); background: radial-gradient(circle at 50% 10%, #c6c09c calc(10% - 2px), transparent calc(10% - 1px)), radial-gradient(circle at 10%, #ffc98b calc(10% - 2px), transparent calc(10% - 1px)), radial-gradient(circle at 50% 90%, #ffb284 calc(10% - 2px), transparent calc(10% - 1px)), radial-gradient(circle at 90%, #e79796 calc(10% - 2px), transparent calc(10% - 1px)); animation: a 2s ease-in-out infinite; } .ring > .ring { --f: 0.6 ; } @keyframes a { to { transform: scale(var(--f)) rotate(1turn); } } |
2#: Сразу после открывающего тега <body> поместите:
|
1 2 3 4 5 6 7 8 |
<div class="ring"> <div class="ring"> <div class="ring"> <div class="ring"> </div> </div> </div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
