Анимированные новогодние гирлянды на CSS3
Классная анимированная новогодняя гирлянда, которая выполнена на чистом CSS
Для начала посмотрите ДЕМО
Установка:
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 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 |
.lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 1; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; } .lightrope li { position: relative; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; list-style: none; margin: 0; padding: 0; display: block; width: 12px; height: 28px; border-radius: 50%; margin: 20px; display: inline-block; background: #00f7a5; box-shadow: 0px 4.66667px 24px 3px #00f7a5; -webkit-animation-name: flash-1; animation-name: flash-1; -webkit-animation-duration: 2s; animation-duration: 2s; } .lightrope li:nth-child(2n+1) { background: cyan; box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5); -webkit-animation-name: flash-2; animation-name: flash-2; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; } .lightrope li:nth-child(4n+2) { background: #f70094; box-shadow: 0px 4.66667px 24px 3px #f70094; -webkit-animation-name: flash-3; animation-name: flash-3; -webkit-animation-duration: 1.1s; animation-duration: 1.1s; } .lightrope li:nth-child(odd) { -webkit-animation-duration: 1.8s; animation-duration: 1.8s; } .lightrope li:nth-child(3n+1) { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; } .lightrope li:before { content: ""; position: absolute; background: #222; width: 10px; height: 9.33333px; border-radius: 3px; top: -4.66667px; left: 1px; } .lightrope li:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 18.66667px; border-bottom: solid #222 2px; border-radius: 50%; } .lightrope li:last-child:after { content: none; } .lightrope li:first-child { margin-left: -40px; } @-webkit-keyframes flash-1 { 0%, 100% { background: #00f7a5; box-shadow: 0px 4.66667px 24px 3px #00f7a5; } 50% { background: rgba(0, 247, 165, 0.4); box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2); } } @keyframes flash-1 { 0%, 100% { background: #00f7a5; box-shadow: 0px 4.66667px 24px 3px #00f7a5; } 50% { background: rgba(0, 247, 165, 0.4); box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2); } } @-webkit-keyframes flash-2 { 0%, 100% { background: cyan; box-shadow: 0px 4.66667px 24px 3px cyan; } 50% { background: rgba(0, 255, 255, 0.4); box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2); } } @keyframes flash-2 { 0%, 100% { background: cyan; box-shadow: 0px 4.66667px 24px 3px cyan; } 50% { background: rgba(0, 255, 255, 0.4); box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2); } } @-webkit-keyframes flash-3 { 0%, 100% { background: #f70094; box-shadow: 0px 4.66667px 24px 3px #f70094; } 50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2); } } @keyframes flash-3 { 0%, 100% { background: #f70094; box-shadow: 0px 4.66667px 24px 3px #f70094; } 50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2); } } |
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 |
<ul class="lightrope"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> |
Простенько и красиво 🙂