155 views
CSSAdd prefixes
1.wrapper { 2 height: 200px; 3} 4 5.cloud { 6 overflow: hidden; 7 padding: 5px; 8 height: 50px; 9} 10 11.cloud_left { 12 position: relative; 13 float: left; 14 background-color: #234; 15 width: 100px; 16 height: 100px; 17 border-radius: 50%; 18 box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75); 19} 20 21.cloud_right { 22 position: relative; 23 float: left; 24 background-color: #203040; 25 width: 70px; 26 height: 70px; 27 border-radius: 50%; 28 top: 15px; 29 left: -30px; 30 box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75); 31} 32 33.rain { 34 width: 180px; 35 height: 140px; 36} 37 38.drop { 39 position: relative; 40 float: left; 41 width: 2px; 42 margin: 10px; 43 left: 20px; 44 background: #789; 45 box-shadow: 1px 0.5px 1px 0.5px rgba(0, 0, 0, 0.75); 46 animation: rain_401 0.8s infinite ease-out; 47} 48 49.drop:nth-child(1) { 50 height: 15px; 51 top: 5px; 52 animation-delay: -1.0s; 53} 54 55.drop:nth-child(2) { 56 height: 20px; 57 animation-delay: -1.4s; 58} 59 60.drop:nth-child(3) { 61 height: 15px; 62 top: 5px; 63 animation-delay: -1.6s; 64} 65 66.drop:nth-child(4) { 67 height: 10px; 68 top: 10px; 69 animation-delay: -1.2s; 70} 71 72.drop:nth-child(5) { 73 height: 5px; 74 top: 15px; 75 animation-delay: -1.6s; 76} 77 78@keyframes rain_401 { 79 0% { 80 opacity: 1; 81 transform: translate(0, 0); 82 } 83 84 100% { 85 opacity: 0.2; 86 transform: translate(0, 100px); 87 } 88} 89 90.surface { 91 position: relative; 92 width: 180px; 93 height: 140px; 94 top: -140px; 95} 96 97.hit { 98 position: absolute; 99 width: 3px; 100 height: 1px; 101 margin: 10px; 102 bottom: -5px; 103 border: 1px solid #456; 104 border-radius: 50%; 105 animation: hit_401 0.8s infinite ease; 106} 107 108.hit:nth-child(1) { 109 left: 19px; 110 animation-delay: -0.3s; 111} 112 113.hit:nth-child(2) { 114 left: 41px; 115 animation-delay: -0.7s; 116} 117 118.hit:nth-child(3) { 119 left: 63px; 120 animation-delay: -0.9s; 121} 122 123.hit:nth-child(4) { 124 left: 85px; 125 animation-delay: -0.5s; 126} 127 128.hit:nth-child(5) { 129 left: 107px; 130 animation-delay: -0.9s; 131} 132 133@keyframes hit_401 { 134 0% { 135 opacity: 0.75; 136 transform: scale(1); 137 } 138 139 100% { 140 opacity: 0; 141 transform: scale(2.5); 142 } 143}
HTML
1<div class="wrapper"> 2 <div class="cloud"> 3 <div class="cloud_left"></div> 4 <div class="cloud_right"></div> 5 </div> 6 <div class="rain"> 7 <div class="drop"></div> 8 <div class="drop"></div> 9 <div class="drop"></div> 10 <div class="drop"></div> 11 <div class="drop"></div> 12 </div> 13 <div class="surface"> 14 <div class="hit"></div> 15 <div class="hit"></div> 16 <div class="hit"></div> 17 <div class="hit"></div> 18 <div class="hit"></div> 19 </div> 20</div>