Новогодняя елка с гирляндами:
Размер елки задается шириной SVG элемента в классе #tree
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 |
<svg id="tree" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="-1694.2 483.2 199.3 285.2" xml:space="preserve"> <g id="tree"> <rect x="-1605.6" y="697.1" class="st0" width="21.7" height="71.3"/> <polygon class="st1" points="-1656.1 616.8 -1634.8 612 -1670.6 676.1 -1648.5 671.1 -1694.2 753 -1595 730.5 -1595 507.4 "/> <polygon class="st2" points="-1494.9 753 -1540.6 671.1 -1518.5 676.1 -1554.4 612 -1533.1 616.8 -1594.7 506.8 -1595 507.4 -1595 730.5 -1594.7 730.4 "/> </g> <g id="lights"> <g id="blue-lt"> <circle class="blue-lt g1" cx="-1575" cy="706.1" r="9"/> <circle class="blue-lt g2" cx="-1621.3" cy="641" r="7"/> <circle class="blue-lt g3" cx="-1665.5" cy="732.8" r="7"/> <circle class="blue-lt g1" cx="-1600.3" cy="668.5" r="7"/> </g> <g id="blue-dk"> <circle class="blue-dk g3" cx="-1578.3" cy="570.8" r="7"/> <circle class="blue-dk g1" cx="-1538" cy="718.6" r="7"/> <circle class="blue-dk g2" cx="-1594.8" cy="610.3" r="7"/> </g> <g id="red-md"> <circle class="red-md g1" cx="-1635.6" cy="681.7" r="9"/> <circle class="red-md g1" cx="-1570.3" cy="634" r="9"/> <circle class="red-md g2" cx="-1607.3" cy="711.6" r="7"/> </g> <g id="gold-lt"> <circle class="gold-lt g1" cx="-1612.3" cy="585.8" r="9"/> <circle class="gold-lt g2" cx="-1631.6" cy="705.6" r="7"/> </g> <g id="gold-dk"> <circle class="gold-dk g2" cx="-1572.3" cy="604.7" r="7"/> <circle class="gold-dk g3" cx="-1561.3" cy="681.7" r="7"/> </g> </g> <polygon class="st3" points="-1600.5 499.9 -1618.1 499.9 -1603.8 510.3 -1609.3 527 -1595 516.7 -1595 483.2 "/> <polygon class="st4" points="-1572 499.9 -1589.6 499.9 -1595 483.2 -1595 516.7 -1580.8 527 -1586.2 510.3 "/> </svg> |
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 |
#tree { width: 220px; display: block; margin: 0 auto; } .st0 { fill:#332C28; } .st1 { fill:#0f690f; } .st2 { fill:#388f38; } .st3 { fill:#a60505; } .st4 { fill:#d90000; } .red-md { fill: #aa1231; animation: 0.6s red-flash ease-in-out infinite; } @keyframes red-flash { 40% { fill: #ea385c; } 80% { fill: #aa1231; } } .gold-lt { fill: #c1881c; animation: 0.6s gold-lt-flash ease-in-out infinite; } @keyframes gold-lt-flash { 40% { fill: #e7b75c; } 80% { fill: #c1881c; } } .blue-lt { fill: #1f3e64; animation: 0.6s blue-lt-flash ease-in-out infinite; } @keyframes blue-lt-flash { 40% { fill: #386fb1; } 80% { fill: #1f3e64; } } .blue-dk { fill: #0f1f2f; animation: 0.6s blue-dk-flash ease-in-out infinite; } @keyframes blue-dk-flash { 40% { fill: #28527c; } 80% { fill: #0f1f2f; } } .gold-dk { fill: #69512a; animation: 0.6s gold-dk-flash ease-in-out infinite; } @keyframes gold-dk-flash { 40% { fill: #b28947; } 80% { fill: #69512a; } } .g1 { animation-delay: 0s; } .g2 { animation-delay: 0.4s; } .g3 { animation-delay: 0.8s; } |
Найдено на codepen.io у пользователя Michelle Barker
Новогодняя елка с шарами:
Вариант сделан с точными величинами, поэтому для изменения размера нужно будет использовать transform: scale()
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 |
<div class="merry-xmas"> <div class="star-container"> <div class="star"></div> </div> <div class="xmas-tree"> <div class="tree1"></div> <div class="tree2"></div> <div class="tree3"></div> <div class="tree4"></div> <div class="tree5"></div> <div class="trunk"></div> </div> <div class="ornament-container1"> <div class="ornament"></div> </div> <div class="ornament-container2"> <div class="ornament"></div> </div> <div class="ornament-container3"> <div class="ornament"></div> </div> <div class="ornament-container4"> <div class="ornament"></div> </div> <div class="ornament-container5"> <div class="ornament"></div> </div> <div class="ornament-container6"> <div class="ornament"></div> </div> <div class="xmas-lights"> <div class="light1"></div> <div class="light2"></div> <div class="light3"></div> <div class="light4"></div> <div class="light5"></div> <div class="light6"></div> <div class="light7"></div> <div class="light8"></div> <div class="light9"></div> <div class="light10"></div> <div class="light11"></div> <div class="light12"></div> <div class="light13"></div> <div class="light14"></div> <div class="light15"></div> <div class="light16"></div> <div class="light17"></div> <div class="light18"></div> <div class="light19"></div> <div class="light20"></div> </div> </div> |
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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 |
.merry-xmas { margin: 0 auto 10px auto; width: 400px; height: 400px; position: relative; overflow: hidden; } [class^="tree"] { position: relative; width: 0; height: 0; border-style: solid; border-radius: 100%; } .tree1 { margin-left: 100px; border-width: 0 100px 75px 100px; border-color: transparent transparent #99c671 transparent; z-index: 5; } .tree2 { top: -40px; margin-left: 75px; border-width: 0 125px 85px 125px; border-color: transparent transparent #68bb47 transparent; z-index: 4; } .tree3 { top: -85px; margin-left: 50px; border-width: 0 150px 100px 150px; border-color: transparent transparent #42aa47 transparent; z-index: 3; } .tree4 { top: -140px; margin-left: 25px; border-width: 0 175px 115px 175px; border-color: transparent transparent #2e9343 transparent; z-index: 2; } .tree5 { top: -215px; border-width: 0 200px 135px 200px; border-color: transparent transparent #247e37 transparent; z-index: 1; } .trunk { position: absolute; width: 30px; height: 50px; margin-left: 185px; top: 340px; background-color: #996633; } @keyframes roty { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .star-container { position: relative; height: 50px; width: 50px; margin-left: 195px; top: 0px; z-index: 6; transform: rotate(35deg); } .star { margin: 50px 0; position: absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 25px 17px 25px; border-color: transparent transparent #ffd105 transparent; animation: 1s roty infinite linear; } .star:before { position: absolute; height: 0; width: 0; top: 0px; left: -25px; content: ''; border-style: solid; border-width: 0 25px 17px 25px; border-color: transparent transparent #ffd105 transparent; transform: rotate(-70deg); } .star:after { position: absolute; height: 0; width: 0; top: -12px; left: -16px; content: ''; border-style: solid; border-width: 0 10px 20px 10px; border-color: transparent transparent #ffd105 transparent; transform: rotate(-35deg); } .ornament { position: relative; background: radial-gradient(#ffffff, #ffff99, #ffcc33); width: 32px; height: 32px; border-radius: 100%; z-index: 1; overflow: hidden; } .ornament:before { position: absolute; content: ''; width: 20px; height: 20px; top: 0px; left: 0px; background: #fff; border-radius: 100%; } .ornament:after { position: absolute; content: ''; width: 42px; height: 42px; top: -20px; left: -10px; border: solid 5px #ffcc33; border-radius: 100%; } [class^="ornament-container"] { position: absolute; z-index: 7; } .ornament-container1 { top: 155px; left: 120px; } .ornament-container2 { top: 210px; left: 270px; } .ornament-container3 { top: 300px; left: 100px; } .ornament-container4 { top: 110px; left: 250px; } .ornament-container5 { top: 320px; left: 310px; } .ornament-container6 { top: 250px; left: 190px; } [class^="light"] { position: absolute; width: 5px; height: 5px; border-radius: 100%; transition-property: background; transition-duration: 1s; transition-timing-function: linear; animation: light 5s infinite; z-index: 6; } @keyframes light { 0% {background:transparent;} 50% {background:#ffffff;} 100% {background:transparent;} } .xmas-lights { position: absolute; top:-50px; left: -15px; z-index: 6; } .light1 { top: 150px; left: 180px; } .light2 { top: 130px; left: 210px; animation-delay: 3s; } .light3 { top: 200px; left: 150px; animation-delay: 2s; } .light4 { top: 210px; left: 220px; animation-delay: 1s; } .light5 { top: 260px; left: 180px; animation-delay: 3s; } .light6 { top: 240px; left: 150px; animation-delay: 2s; } .light7 { top: 250px; left: 270px; animation-delay: 1s; } .light8 { top: 300px; left: 280px; animation-delay: 3s; } .light9 { top: 300px; left: 200px; animation-delay: 2s; } .light10 { top: 160px; left: 240px; animation-delay: 1s; } .light11 { top: 350px; left: 180px; animation-delay: 2s; } .light12 { top: 3150px; left: 210px; animation-delay: 3s; } .light13 { top: 370px; left: 120px; animation-delay: 2s; } .light14 { top: 290px; left: 220px; animation-delay: 1s; } .light15 { top: 320px; left: 150px; animation-delay: 3s; } .light16 { top: 370px; left: 200px; animation-delay: 2s; } .light17 { top: 290px; left: 220px; animation-delay: 1s; } .light18 { top: 320px; left: 260px; animation-delay: 3s; } .light19 { top: 370px; left: 300px; animation-delay: 3s; } .light20 { top: 350px; left: 250px; animation-delay: 3s; } |
Найдено на codepen.io у пользователя Emese Pócsik
Минималистичная елка
Как и в первом варианте, елка сделана на SVG. Ее размер и цвет задается в классе #xtree
, а цвет звезды и скорость ее вращения в #star
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 |
<svg version="1.1" id="xtree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50"> <g> <g> <polygon id="star" points="22.64,7.797 25,6.557 27.359,7.797 26.909,5.17 28.816,3.31 26.181,2.925 25,0.535 23.82,2.925 21.183,3.31 23.092,5.17 " /> </g> <g> <g> <polygon points="34.784,19.016 35.636,19.016 25,8.381 18.218,15.162 "/> </g> <g> <path d="M34.506,27.173l-1.98,0.349c0.323,0.192,0.553,0.532,0.553,0.938c0,0.611-0.496,1.105-1.106,1.105 c-0.611,0-1.104-0.496-1.104-1.105c0-0.266,0.105-0.498,0.259-0.688l-3.443,0.611c0.85,0.074,1.524,0.761,1.524,1.631 c0,0.916-0.743,1.656-1.656,1.656c-0.919,0-1.658-0.741-1.658-1.656c0-0.655,0.387-1.209,0.938-1.479l-4.348,0.772 c0.299,0.151,0.51,0.456,0.51,0.813c0,0.51-0.411,0.922-0.921,0.922c-0.509,0-0.918-0.412-0.918-0.922 c0-0.242,0.096-0.456,0.248-0.62l-10.007,1.776l-2.513,2.513l27.466,2.003l-1.467-1.468h6.776L34.506,27.173z"/> </g> <g> <path d="M16.694,25.974l-3.181,3.182l24.243-4.304l-4.407-4.404l-6.46-1.504c0.371,0.354,0.604,0.853,0.604,1.407 c0,1.077-0.872,1.95-1.949,1.95c-1.076,0-1.946-0.873-1.946-1.95c0-0.877,0.58-1.607,1.375-1.852l-3.319-0.773 c0.12,0.203,0.205,0.426,0.205,0.676c0,0.756-0.614,1.37-1.37,1.37c-0.754,0-1.367-0.614-1.367-1.37 c0-0.476,0.258-0.876,0.628-1.121l-2.963-0.689l-2.425,2.425h3.715l-6.957,6.957L16.694,25.974L16.694,25.974z"/> </g> <g> <path d="M43.016,42.46l-4.811-4.813L33.437,37.3c0.258,0.265,0.42,0.623,0.42,1.018c0,0.81-0.654,1.465-1.462,1.465 c-0.807,0-1.46-0.655-1.46-1.465c0-0.481,0.251-0.889,0.614-1.153l-8.133-0.594c0.205,0.207,0.332,0.488,0.332,0.801 c0,0.634-0.512,1.147-1.146,1.147c-0.632,0-1.144-0.511-1.144-1.147c0-0.381,0.197-0.701,0.484-0.909l-3.998-0.294 c0.54,0.32,0.907,0.9,0.907,1.571c0,1.011-0.82,1.829-1.832,1.829c-1.008,0-1.827-0.818-1.827-1.829 c0-0.762,0.466-1.414,1.128-1.689l-2.73-0.199l-6.606,6.608h15.829l-1.257,6.979h6.889l-1.259-6.978H43.016z"/> </g> </g> </g> </svg> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#star { animation: spin 6s linear infinite; transform-origin: center; fill: #eb2700; } #xtree { margin: 0 auto; width: 400px; display: block; fill: #3c9c33; } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } |
Найдено на codepen.io у пользователя Vikas Chauhan
С наступающим НГ, Саша!
Спасибо, Вас тоже 🙂
Спасибо :)))