Красивый оранжевый спиннер для Хеллоуина с использованием 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 |
.seg { display: flex; position: absolute; top: 50%; left: 50%; width: 5em; height: 6px; transform: translate(-50%, -50%) rotate(calc(var(--k)/var(--n)*1turn)) translate(calc(6px/var(--tan) + .5*5em)); } .seg::before, .seg::after { --i: 0; --sgn-i: calc(1 - 2*var(--i)); flex: 1; margin: 0 1px; border-radius: 3px; transform-origin: calc(var(--i)*100%); background: linear-gradient(calc(var(--sgn-i)*-90deg), #3e1c33, #602749, #b14623, #f6921d); animation: zip 1s ease-out calc((var(--k)/var(--n) - 1)*2*1s) infinite alternate; content: ""; } .seg::after { --i: 1 ; } @keyframes zip { 0%, 50% { transform: none; } 75%, 100% { transform: rotate(calc(var(--sgn-i)*68deg)); } } |
2#: Сразу после открывающего тега <body> вставьте:
|
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 |
<div style="--n: 64; --tan: 0.049126849769467254"> <div class="seg" style="--k: 63"></div> <div class="seg" style="--k: 62"></div> <div class="seg" style="--k: 61"></div> <div class="seg" style="--k: 60"></div> <div class="seg" style="--k: 59"></div> <div class="seg" style="--k: 58"></div> <div class="seg" style="--k: 57"></div> <div class="seg" style="--k: 56"></div> <div class="seg" style="--k: 55"></div> <div class="seg" style="--k: 54"></div> <div class="seg" style="--k: 53"></div> <div class="seg" style="--k: 52"></div> <div class="seg" style="--k: 51"></div> <div class="seg" style="--k: 50"></div> <div class="seg" style="--k: 49"></div> <div class="seg" style="--k: 48"></div> <div class="seg" style="--k: 47"></div> <div class="seg" style="--k: 46"></div> <div class="seg" style="--k: 45"></div> <div class="seg" style="--k: 44"></div> <div class="seg" style="--k: 43"></div> <div class="seg" style="--k: 42"></div> <div class="seg" style="--k: 41"></div> <div class="seg" style="--k: 40"></div> <div class="seg" style="--k: 39"></div> <div class="seg" style="--k: 38"></div> <div class="seg" style="--k: 37"></div> <div class="seg" style="--k: 36"></div> <div class="seg" style="--k: 35"></div> <div class="seg" style="--k: 34"></div> <div class="seg" style="--k: 33"></div> <div class="seg" style="--k: 32"></div> <div class="seg" style="--k: 31"></div> <div class="seg" style="--k: 30"></div> <div class="seg" style="--k: 29"></div> <div class="seg" style="--k: 28"></div> <div class="seg" style="--k: 27"></div> <div class="seg" style="--k: 26"></div> <div class="seg" style="--k: 25"></div> <div class="seg" style="--k: 24"></div> <div class="seg" style="--k: 23"></div> <div class="seg" style="--k: 22"></div> <div class="seg" style="--k: 21"></div> <div class="seg" style="--k: 20"></div> <div class="seg" style="--k: 19"></div> <div class="seg" style="--k: 18"></div> <div class="seg" style="--k: 17"></div> <div class="seg" style="--k: 16"></div> <div class="seg" style="--k: 15"></div> <div class="seg" style="--k: 14"></div> <div class="seg" style="--k: 13"></div> <div class="seg" style="--k: 12"></div> <div class="seg" style="--k: 11"></div> <div class="seg" style="--k: 10"></div> <div class="seg" style="--k: 9"></div> <div class="seg" style="--k: 8"></div> <div class="seg" style="--k: 7"></div> <div class="seg" style="--k: 6"></div> <div class="seg" style="--k: 5"></div> <div class="seg" style="--k: 4"></div> <div class="seg" style="--k: 3"></div> <div class="seg" style="--k: 2"></div> <div class="seg" style="--k: 1"></div> <div class="seg" style="--k: 0"></div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
