Jump to content
  • Sign Up
Skrillex

SCRIPT - DECORATIUNI DE CRACIUN & ANUL NOU

Recommended Posts

  • Beculete de craciun

 

<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&#123;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&#123;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>

 

 

  • Mos Craciun cu sania si un bradut in coltul ecranului (gif)

 

<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>

 

  • Artificii

 

<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>

 

  • Mos Craciun (cate zile mai sunt pana la craciun pe barba lui)

 

<iframe frameborder="0" marginheight="0" marginwidth="0" 
scrolling="no" height="256" width="256"
src="https://www.christmaswebmaster.com/countdowns/santacount.html">
</iframe>

 

  • Beculete care se sparg:

 

Descarca si demo : http://www.schillmania.com/projects/snowstorm/lights/


 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.