Coduri de Craciun pentru site-ul tau!
Salutare tuturor!
Astazi am sa va prezint cateva coduri pentru a va personaliza site-ul cu ocazia sarbatorilor!
1. Fulgi de zapada (HTML + 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 |
<style> /* customizable snowflake styling */ .snowflake { color: #fff; font-size: 1em; font-family: Arial; text-shadow: 0 0 1px #000; } @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s} </style> <div class="snowflakes" aria-hidden="true"> <div class="snowflake"> ❄ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❄ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❄ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❄ </div> </div> |
2. Ninsoare ce se asterne (JS)
|
1 2 3 4 5 |
<script type="text/javascript" src="https://vps.baxandrei.ro/http%3Ehttps2.php?adresa=http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script> <script> snowStorm.flakesMaxActive = 96; snowStorm.useTwinkleEffect = true; </script> |
3. Beculete de craciun (HTML + 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 |
<style> body{margin:0;}.lightrope{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;margin:-15px 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;padding:0;width:12px;height:28px;border-radius:50%;margin:20px;display:inline-block;background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s}.lightrope li:after,.lightrope li:before{content:"";position:absolute}.lightrope li:nth-child(2n+1){background:#0ff;box-shadow:0 4.67px 24px 3px rgba(0,255,255,.5);-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}.lightrope li:nth-child(4n+2){background:#f70094;box-shadow:0 4.67px 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{background:#222;width:10px;height:9.33px;border-radius:3px;top:-4.67px;left:1px}.lightrope li:after{top:-14px;left:9px;width:52px;height:18.67px;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:0 4.67px 24px 3px #00f7a5}50%{background:rgba(0,247,165,.4);box-shadow:0 4.67px 24px 3px rgba(0,247,165,.2)}}@keyframes flash-1{0%,100%{background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5}50%{background:rgba(0,247,165,.4);box-shadow:0 4.67px 24px 3px rgba(0,247,165,.2)}}@-webkit-keyframes flash-2{0%,100%{background:#0ff;box-shadow:0 4.67px 24px 3px #0ff}50%{background:rgba(0,255,255,.4);box-shadow:0 4.67px 24px 3px rgba(0,255,255,.2)}}@keyframes flash-2{0%,100%{background:#0ff;box-shadow:0 4.67px 24px 3px #0ff}50%{background:rgba(0,255,255,.4);box-shadow:0 4.67px 24px 3px rgba(0,255,255,.2)}}@-webkit-keyframes flash-3{0%,100%{background:#f70094;box-shadow:0 4.67px 24px 3px #f70094}50%{background:rgba(247,0,148,.4);box-shadow:0 4.67px 24px 3px rgba(247,0,148,.2)}}@keyframes flash-3{0%,100%{background:#f70094;box-shadow:0 4.67px 24px 3px #f70094}50%{background:rgba(247,0,148,.4);box-shadow:0 4.67px 24px 3px rgba(247,0,148,.2)}} </style> <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> |
4. Mos Craciun cu sania si un bradut in coltul ecranului (HTML + JS + 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 |
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var windowWidth = $(document).width(); var santa = $('.santa'); santa_right_pos = windowWidth + santa.width(); santa.right = santa_right_pos; function movesanta(){ santa.animate({right : windowWidth + santa.width()},15000, function(){ santa.css("right","-500px"); setTimeout(function(){ movesanta(); },10000); }); } movesanta(); }); </script> <style> .santa { position: fixed; bottom: 10px; right: -500px; } .xmas-tree { position: fixed; bottom: -20px; right: 5px; } </style> <div class="santa"><img src="https://i.ibb.co/ZM1kjCG/christmas-sled-source-ulp.gif" alt=""></div> <div class="xmas-tree"><img src="https://i.ibb.co/x7jsNDR/Animated-Xmas-tree-animation.gif" alt=""></div> |
5. Artificii (HTML + CSS)
|
1 2 3 4 5 6 7 |
<style> body{margin:0;padding:0}.pyro>.after,.pyro>.before{position:absolute;width:5px;height:5px;border-radius:50%;box-shadow:0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff;-moz-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;-webkit-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;-o-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;-ms-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards}.pyro>.after{-moz-animation-delay:1.25s,1.25s,1.25s;-webkit-animation-delay:1.25s,1.25s,1.25s;-o-animation-delay:1.25s,1.25s,1.25s;-ms-animation-delay:1.25s,1.25s,1.25s;animation-delay:1.25s,1.25s,1.25s;-moz-animation-duration:1.25s,1.25s,6.25s;-webkit-animation-duration:1.25s,1.25s,6.25s;-o-animation-duration:1.25s,1.25s,6.25s;-ms-animation-duration:1.25s,1.25s,6.25s;animation-duration:1.25s,1.25s,6.25s}@-webkit-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-moz-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-o-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-ms-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-webkit-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-moz-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-o-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-ms-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-webkit-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@-moz-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@-o-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@-ms-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}.pyro{position:fixed;top:0;left:0;width:100%;height:100%} </style> <div class="pyro"> <div class="before"></div> <div class="after"></div> </div> |
Sper sa va fie utile aceste coduri! Ne vedem data viitoare cu un nou articol 🙂
