CSS-only balls

In this example below you will see how to do a CSS-only balls with some HTML / CSS and Javascript

СSS-only christmas decorations.

Thumbnail
This awesome code was written by deineko, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright deineko ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS-only balls</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="nyIncutWrapper">
  <div class="snowOverlay">
    <div class="nyIncut">
      <div class="nyIncutSection nyAfisha">
        <div class="ballTop"><i class="ballHolder"></i><i class="ballRope"></i></div>
        <div class="ballOuter">
          <div class="daBall"> </div>
        </div>
      </div>
      <div class="nyIncutSection nyPeopleTalk">
        <div class="ballTop"><i class="ballHolder"></i><i class="ballRope"></i></div>
        <div class="ballOuter">
          <div class="daBall"> </div>
        </div>
      </div>
      <div class="nyIncutSection nyAdvice">
        <div class="ballTop"><i class="ballHolder"></i><i class="ballRope"></i></div>
        <div class="ballOuter">
          <div class="daBall"><p></p> </div>
        </div>
      </div>
      <div class="nyIncutSection mmSchedule">
        <div class="ballTop"><i class="ballHolder"></i><i class="ballRope"></i></div>
        <div class="ballOuter">
          <div class="daBall"><a class="nyProgram" href="#"></a></div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/deineko/css-only-balls-XJLEgG */
.nyIncutSection p.AllLink, .nyIncutSection hr, .nyIncutSection h3, .nyIncutSection p.DateAndContent {display:none}
#nyIncutWrapper{background-image:url(http://m24.ru/img/misc/elka-bg-7.png);background-size:auto 300px;background-color:#09291B;background-position:center top;background-repeat:repeat;clear:both;overflow:hidden;padding:0;width:100%;z-index:1;height:auto;box-shadow:0 -10px 10px rgba(0,0,0,0.5) inset;border-bottom:1px solid #0C3220}
.nyIncut{margin:auto;position:relative;width:981px;z-index:1}
#nyIncutWrapper .ArticlesListType1 ul li{margin:0 auto;height:120px;border:0 none}
.nyIncutSection{width:236px;margin:0 11px 0 0;float:left;height:auto;overflow:visible;border-radius:0;-webkit-animation-duration:40s;animation-duration:40s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:kachkach;animation-name:kachkach;-webkit-animation:40s ease 0 normal none infinite running kachkach;transform-origin:top;-webkit-transform-origin:top}
@keyframes kachkach {
20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
22%{-webkit-transform:rotate(9deg);transform:rotate(9deg)}
24%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}
26%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
70%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
72%{-webkit-transform:rotate(9deg);transform:rotate(9deg)}
74%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}
76%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@-webkit-keyframes kachkach {
20%{-webkit-transform:rotate(0deg)}
22%{-webkit-transform:rotate(9deg)}
24%{-webkit-transform:rotate(-6deg)}
26%{-webkit-transform:rotate(0deg)}
70%{-webkit-transform:rotate(0deg)}
72%{-webkit-transform:rotate(9deg)}
74%{-webkit-transform:rotate(-6deg)}
76%{-webkit-transform:rotate(0deg)}
}
.nyIncutSection.nyPeopleTalk{animation-delay:5s;-webkit-animation-delay:5s}
.nyIncutSection.nyAdvice{animation-delay:10s;-webkit-animation-delay:10s}
.nyIncutSection.nyAfisha{animation-delay:0;-webkit-animation-delay:0}
.nyIncutSection.mmSchedule{animation-delay:.5s;-webkit-animation-delay:.5s}
#nyIncutWrapper .ArticlesListType1{padding:0 17px 0;margin:0;background:transparent}
#nyIncutWrapper h4 a,#nyIncutWrapper .Title a{color:#fff;opacity:0.85;transition:all 0.3s ease-in;-webkit-transition:all .3s ease-in}
#nyIncutWrapper h4 a:hover,#nyIncutWrapper .Title a:hover{color:#fff;opacity:1;transition:all .3s ease-in;-webkit-transition:all .3s ease-in;text-decoration:none}
#nyIncutWrapper h4 {font-family: Lobster,Georgia,serif;font-size: 22px;font-weight: normal;line-height: 23px;margin: 17px 0;text-align: center;text-transform: none;
}
#nyIncutWrapper .nyAfisha h4 {font-size:28px;line-height:30px;margin: 35px 0 15px;padding:0}
#nyIncutWrapper .daBall{border-radius:50%;margin:0;padding:0;box-shadow:-50px -25px 25px rgba(0,0,0,0.30) inset;overflow:hidden;}
#nyIncutWrapper .nyAfisha .daBall{background-color:rgba(177,25,29,0.95)}
#nyIncutWrapper .nyPeopleTalk .daBall{background-color:rgba(112,70,143,0.95)}
#nyIncutWrapper .nyAdvice .daBall{background-color:rgba(22,179,118,0.95)}
.nyIncutSection .ballTop{height:42px;text-align:center;width:236px;overflow:visible;padding:0;margin:0;position:relative}
.nyIncutSection .ballHolder{display:block;width:64px;height:24px;background:rgba(200,200,0,0.75);position:absolute;left:50%;margin-left:-32px;top:22px;border-radius:5px 5px 0 0;z-index:-1;box-shadow:10px 15px 3px rgba(0,0,0,0.25)}
.nyIncutSection .ballRope{display:block;width:2px;height:42px;margin-left:-2px;top:-20px;background:rgba(255,255,255,0.5);position:absolute;left:50%;border-left:1px dashed #d7d7d7;border-right:1px dashed #d7d7d7;box-shadow:10px 15px 3px rgba(0,0,0,0.25);z-index:-2}
.daBall{border-radius:50%;box-shadow:10px 15px 3px rgba(0,0,0,0.25);height:236px;width:236px}
.nyIncutSection .ArticlesListType1 .Image{border-radius:50%;border:3px solid rgba(255,255,255,0.25);display:block}
.nyIncutSection.mmSchedule{margin:0}
a.nyProgram{height:105px;display:block;width:100px;text-align:center;margin:auto;background:url(/img/misc/mm-logos-white100px.png);background-size:auto 100px}
#nyIncutWrapper .mmSchedule .daBall{background-color:#E9184E}
a.nyProgram{display:block;margin:45px auto 0;animation:20s ease 0s reverse none infinite running mmprograms;-webkit-animation:20s ease 0s reverse none infinite running mmprograms;background:url(http://m24.ru/img/misc/mm-logos-white.png) repeat-x scroll 0 0 / auto 160px rgba(0,0,0,0);display:block;height:160px;text-align:center;width:160px}
@keyframes mmprograms {
15%{background-position:0 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
19%{opacity:0.1;-webkit-transform:scale(0.9) skewX(-30deg);transform:scale(0.9) skewX(-30deg)}
20%{background-position:-160px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
35%{background-position:-160px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
39%{opacity:0.1;-webkit-transform:scale(0.9) skewX(-30deg);transform:scale(0.9) skewX(-30deg)}
40%{background-position:-320px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
55%{background-position:-320px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
59%{opacity:0.1;-webkit-transform:scale(0.9) skewX(-30deg);transform:scale(0.9) skewX(-30deg)}
60%{background-position:-480px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
75%{background-position:-480px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
79%{opacity:0.1;-webkit-transform:scale(0.9) skewX(-30deg);transform:scale(0.9) skewX(-30deg)}
80%{background-position:-640px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
95%{background-position:-640px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
99%{opacity:0.1;-webkit-transform:scale(0.9) skewX(-30deg);transform:scale(0.9) skewX(-30deg)}
100%{background-position:-800px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes mmprograms {
10%{background-position:0 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
15%{opacity:0.1;-webkit-transform:scale(0.9) skewX(15deg);transform:scale(0.9) skewX(15deg)}
25%{background-position:-165px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
30%{background-position:-160px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
35%{opacity:0.1;-webkit-transform:scale(0.9) skewX(15deg);transform:scale(0.9) skewX(15deg)}
45%{background-position:-325px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
50%{background-position:-320px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
55%{opacity:0.1;-webkit-transform:scale(0.9) skewX(15deg);transform:scale(0.9) skewX(15deg)}
65%{background-position:-485px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
70%{background-position:-480px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
75%{opacity:0.1;-webkit-transform:scale(0.9) skewX(15deg);transform:scale(0.9) skewX(15deg)}
85%{background-position:-645px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
90%{background-position:-640px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
95%{opacity:0.1;-webkit-transform:scale(0.9) skewX(15deg);transform:scale(0.9) skewX(15deg)}
100%{background-position:-800px 0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
.snowOverlay {width:100%;height:auto;overflow:hidden;background-color:transparent;padding:0 0 30px}
#Logo a i {background-color:transparent;display:block;width:60px;height:60px;position:absolute;top:0;left:0;background-image:url(/img/misc/walkingdead64.gif);animation:20s linear 2s normal none infinite walkingDed;
-webkit-animation:20s linear 2s normal none infinite walkingDed;opacity:0}
@keyframes walkingDed {
  0% {opacity:0;-webkit-transform:scale(0.1,0.1);transform:scale(0.1,0.1)}
  15% {opacity:0;-webkit-transform:scale(0.1,0.1);transform:scale(0.1,0.1);left:0}
  30% {opacity:1;left:0;-webkit-transform:scale(1,1);transform:scale(1,1)}  
  40% {left:107px; -webkit-transform:scale(1,1); transform:scale(1,1)}
  40.5% {-webkit-transform:scale(-1,1);transform:scale(-1,1); left:107px}  
  50%{opacity:1;-webkit-transform:scale(-1,1);transform:scale(-1,1);left:0}
  50.5%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);left:0}  
  60% {left:107px; -webkit-transform:scale(1,1); transform:scale(1,1)}
  60.5% {-webkit-transform:scale(-1,1);transform:scale(-1,1); left:107px}  
  70%{opacity:1;-webkit-transform:scale(-1,1);transform:scale(-1,1);left:0}
  70.5%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);left:0}  
  80%{opacity:1; -webkit-transform:scale(1,1); transform:scale(1,1); left:107px}
  80.5%{opacity:1; -webkit-transform:scale(-1,1); transform:scale(-1,1); left:107px}  
  90%{opacity:1; -webkit-transform:scale(-1,1); transform:scale(-1,1);left:0}
  100%{opacity:0; -webkit-transform:scale(-0.1,0.1); transform:scale(-0.1,0.1);left:0}
}
@-webkit-keyframes walkingDed {
  0% {opacity:0;-webkit-transform:scale(0.1,0.1)}
  15% {opacity:0;-webkit-transform:scale(0.1,0.1);left:0}
  30% {opacity:1;left:0;-webkit-transform:scale(1,1)}  
  40% {left:107px; -webkit-transform:scale(1,1)}
  40.5% {-webkit-transform:scale(-1,1); left:107px}  
  50%{opacity:1;-webkit-transform:scale(-1,1);left:0}
  50.5%{opacity:1;-webkit-transform:scale(1,1);left:0}  
  60% {left:107px; -webkit-transform:scale(1,1)}
  60.5% {-webkit-transform:scale(-1,1); left:107px}  
  70%{opacity:1;-webkit-transform:scale(-1,1);left:0}
  70.5%{opacity:1;-webkit-transform:scale(1,1);left:0}  
  80%{opacity:1; -webkit-transform:scale(1,1); left:107px}
  80.5%{opacity:1; -webkit-transform:scale(-1,1); left:107px}  
  90%{opacity:1; -webkit-transform:scale(-1,1);left:0}
  100%{opacity:0; -webkit-transform:scale(-0.1,0.1);left:0}
}
.ballOuter {width:236px;height:236px;overflow:hidden;border-radius:50%;box-shadow:10px 15px 3px rgba(0, 0, 0, 0.25)}

Comments