Pure css rain

Developer
Size
4,855 Kb
Views
40,480

How do I make an pure css rain?

What is a pure css rain? How do you make a pure css rain? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.

Pure css rain Previews

Pure css rain - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pure css rain</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #2F4E66; -webkit-animation: thunder 10s ease infinite; -moz-animation: thunder 10s ease infinite; animation: thunder 10s ease infinite;
}
.cloud { position: absolute; display: block; left: 50%; top: 50%; width: 210px; height: 100px; background: #DCE2EF; border-radius: 10% 15%; -webkit-filter: drop-shadow(8px 3px 0 rgba(0, 0, 0, 0.2)); -webkit-animation: float 0.66667s ease infinite; -moz-animation: float 0.66667s ease infinite; animation: float 0.66667s ease infinite;
}
.cloud .particle { position: absolute; display: block; bottom: 0; background: #DCE2EF; border-radius: 47% 54%;
}
.cloud .particle.p1 { width: 100px; height: 100px; left: -50px; -webkit-animation: rotate 2s -0.5s linear infinite; -moz-animation: rotate 2s -0.5s linear infinite; animation: rotate 2s -0.5s linear infinite;
}
.cloud .particle.p2 { width: 140px; height: 140px; left: 0; bottom: 50px; -webkit-animation: rotate 2s -1s linear infinite; -moz-animation: rotate 2s -1s linear infinite; animation: rotate 2s -1s linear infinite;
}
.cloud .particle.p3 { width: 200px; height: 200px; right: -100px; -webkit-animation: rotate 2s -1.5s linear infinite; -moz-animation: rotate 2s -1.5s linear infinite; animation: rotate 2s -1.5s linear infinite;
}
.cloud .raindrops { display: block; position: absolute; top: 115%; width: 100%;
}
.cloud .raindrops .drop { display: block; position: absolute; width: 11.11111px; height: 11.11111px; background: #DCE2EF; border-radius: 50% 0 50% 50%;
}
.cloud .raindrops .drop.d0 { left: 0%; -webkit-animation: fall 0.43333s 0s linear infinite; -moz-animation: fall 0.43333s 0s linear infinite; animation: fall 0.43333s 0s linear infinite;
}
.cloud .raindrops .drop.d1 { left: 6.66667%; -webkit-animation: fall 0.43333s -0.76471s linear infinite; -moz-animation: fall 0.43333s -0.76471s linear infinite; animation: fall 0.43333s -0.76471s linear infinite;
}
.cloud .raindrops .drop.d2 { left: 13.33333%; -webkit-animation: fall 0.43333s -1.52941s linear infinite; -moz-animation: fall 0.43333s -1.52941s linear infinite; animation: fall 0.43333s -1.52941s linear infinite;
}
.cloud .raindrops .drop.d3 { left: 20%; -webkit-animation: fall 0.43333s -2.29412s linear infinite; -moz-animation: fall 0.43333s -2.29412s linear infinite; animation: fall 0.43333s -2.29412s linear infinite;
}
.cloud .raindrops .drop.d4 { left: 26.66667%; -webkit-animation: fall 0.43333s -3.05882s linear infinite; -moz-animation: fall 0.43333s -3.05882s linear infinite; animation: fall 0.43333s -3.05882s linear infinite;
}
.cloud .raindrops .drop.d5 { left: 33.33333%; -webkit-animation: fall 0.43333s -3.82353s linear infinite; -moz-animation: fall 0.43333s -3.82353s linear infinite; animation: fall 0.43333s -3.82353s linear infinite;
}
.cloud .raindrops .drop.d6 { left: 40%; -webkit-animation: fall 0.43333s -4.58824s linear infinite; -moz-animation: fall 0.43333s -4.58824s linear infinite; animation: fall 0.43333s -4.58824s linear infinite;
}
.cloud .raindrops .drop.d7 { left: 46.66667%; -webkit-animation: fall 0.43333s -5.35294s linear infinite; -moz-animation: fall 0.43333s -5.35294s linear infinite; animation: fall 0.43333s -5.35294s linear infinite;
}
.cloud .raindrops .drop.d8 { left: 53.33333%; -webkit-animation: fall 0.43333s -6.11765s linear infinite; -moz-animation: fall 0.43333s -6.11765s linear infinite; animation: fall 0.43333s -6.11765s linear infinite;
}
.cloud .raindrops .drop.d9 { left: 60%; -webkit-animation: fall 0.43333s -6.88235s linear infinite; -moz-animation: fall 0.43333s -6.88235s linear infinite; animation: fall 0.43333s -6.88235s linear infinite;
}
.cloud .raindrops .drop.d10 { left: 66.66667%; -webkit-animation: fall 0.43333s -7.64706s linear infinite; -moz-animation: fall 0.43333s -7.64706s linear infinite; animation: fall 0.43333s -7.64706s linear infinite;
}
.cloud .raindrops .drop.d11 { left: 73.33333%; -webkit-animation: fall 0.43333s -8.41176s linear infinite; -moz-animation: fall 0.43333s -8.41176s linear infinite; animation: fall 0.43333s -8.41176s linear infinite;
}
.cloud .raindrops .drop.d12 { left: 80%; -webkit-animation: fall 0.43333s -9.17647s linear infinite; -moz-animation: fall 0.43333s -9.17647s linear infinite; animation: fall 0.43333s -9.17647s linear infinite;
}
.cloud .raindrops .drop.d13 { left: 86.66667%; -webkit-animation: fall 0.43333s -9.94118s linear infinite; -moz-animation: fall 0.43333s -9.94118s linear infinite; animation: fall 0.43333s -9.94118s linear infinite;
}
.cloud .raindrops .drop.d14 { left: 93.33333%; -webkit-animation: fall 0.43333s -10.70588s linear infinite; -moz-animation: fall 0.43333s -10.70588s linear infinite; animation: fall 0.43333s -10.70588s linear infinite;
}
.cloud .raindrops .drop.d15 { left: 100%; -webkit-animation: fall 0.43333s -11.47059s linear infinite; -moz-animation: fall 0.43333s -11.47059s linear infinite; animation: fall 0.43333s -11.47059s linear infinite;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg) scale(0.95); } 100% { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes rotate { 0% { -moz-transform: rotateZ(0deg); } 50% { -moz-transform: rotateZ(180deg) scale(0.95); } 100% { -moz-transform: rotateZ(360deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg) scale(0.95); -moz-transform: rotateZ(180deg) scale(0.95); -ms-transform: rotateZ(180deg) scale(0.95); -o-transform: rotateZ(180deg) scale(0.95); transform: rotateZ(180deg) scale(0.95); } 100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@-webkit-keyframes float { 0% { -webkit-transform: translate3d(-50%, -50%, 0); } 50% { -webkit-transform: translate3d(-50%, -40%, 0) scale(0.95); } 100% { -webkit-transform: translate3d(-50%, -50%, 0); }
}
@-moz-keyframes float { 0% { -moz-transform: translate3d(-50%, -50%, 0); } 50% { -moz-transform: translate3d(-50%, -40%, 0) scale(0.95); } 100% { -moz-transform: translate3d(-50%, -50%, 0); }
}
@keyframes float { 0% { -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 50% { -webkit-transform: translate3d(-50%, -40%, 0) scale(0.95); -moz-transform: translate3d(-50%, -40%, 0) scale(0.95); -ms-transform: translate3d(-50%, -40%, 0) scale(0.95); -o-transform: translate3d(-50%, -40%, 0) scale(0.95); transform: translate3d(-50%, -40%, 0) scale(0.95); } 100% { -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
}
@-webkit-keyframes fall { 0% { opacity: 0; -webkit-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); } 45% { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); } 100% { opacity: 0; -webkit-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); }
}
@-moz-keyframes fall { 0% { opacity: 0; -moz-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); } 45% { opacity: 1; -moz-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); } 100% { opacity: 0; -moz-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); }
}
@keyframes fall { 0% { opacity: 0; -webkit-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); -moz-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); -ms-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); -o-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); } 45% { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); -moz-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); -ms-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); -o-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); } 100% { opacity: 0; -webkit-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); -moz-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); -ms-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); -o-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); }
}
@-webkit-keyframes thunder { 0% { background: #2F4E66; } 9.99% { background: #2F4E66; } 10% { background: #6a8d9f; } 11% { background: #2F4E66; } 49.99% { background: #2F4E66; } 50% { background: #6a8d9f; } 51.01% { background: #2F4E66; } 54.99% { background: #2F4E66; } 55% { background: #6a8d9f; } 58% { background: #2F4E66; } 64.99% { background: #2F4E66; } 65% { background: #6a8d9f; } 65% { background: #2F4E66; } 68% { background: #6a8d9f; } 70% { background: #2F4E66; } 100% { background: #2F4E66; }
}
@-moz-keyframes thunder { 0% { background: #2F4E66; } 9.99% { background: #2F4E66; } 10% { background: #6a8d9f; } 11% { background: #2F4E66; } 49.99% { background: #2F4E66; } 50% { background: #6a8d9f; } 51.01% { background: #2F4E66; } 54.99% { background: #2F4E66; } 55% { background: #6a8d9f; } 58% { background: #2F4E66; } 64.99% { background: #2F4E66; } 65% { background: #6a8d9f; } 65% { background: #2F4E66; } 68% { background: #6a8d9f; } 70% { background: #2F4E66; } 100% { background: #2F4E66; }
}
@keyframes thunder { 0% { background: #2F4E66; } 9.99% { background: #2F4E66; } 10% { background: #6a8d9f; } 11% { background: #2F4E66; } 49.99% { background: #2F4E66; } 50% { background: #6a8d9f; } 51.01% { background: #2F4E66; } 54.99% { background: #2F4E66; } 55% { background: #6a8d9f; } 58% { background: #2F4E66; } 64.99% { background: #2F4E66; } 65% { background: #6a8d9f; } 65% { background: #2F4E66; } 68% { background: #6a8d9f; } 70% { background: #2F4E66; } 100% { background: #2F4E66; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span class="cloud"> <span class="particle p1"></span> <span class="particle p2"></span> <span class="particle p3"></span> <span class="raindrops"> <span class="drop d0"></span> <span class="drop d1"></span> <span class="drop d2"></span> <span class="drop d3"></span> <span class="drop d4"></span> <span class="drop d5"></span> <span class="drop d6"></span> <span class="drop d7"></span> <span class="drop d8"></span> <span class="drop d9"></span> <span class="drop d10"></span> <span class="drop d11"></span> <span class="drop d12"></span> <span class="drop d13"></span> <span class="drop d14"></span> <span class="drop d15"></span> </span>
</span>
</body>
</html>

Pure css rain - Script Codes CSS Codes

body { background: #2F4E66; -webkit-animation: thunder 10s ease infinite; -moz-animation: thunder 10s ease infinite; animation: thunder 10s ease infinite;
}
.cloud { position: absolute; display: block; left: 50%; top: 50%; width: 210px; height: 100px; background: #DCE2EF; border-radius: 10% 15%; -webkit-filter: drop-shadow(8px 3px 0 rgba(0, 0, 0, 0.2)); -webkit-animation: float 0.66667s ease infinite; -moz-animation: float 0.66667s ease infinite; animation: float 0.66667s ease infinite;
}
.cloud .particle { position: absolute; display: block; bottom: 0; background: #DCE2EF; border-radius: 47% 54%;
}
.cloud .particle.p1 { width: 100px; height: 100px; left: -50px; -webkit-animation: rotate 2s -0.5s linear infinite; -moz-animation: rotate 2s -0.5s linear infinite; animation: rotate 2s -0.5s linear infinite;
}
.cloud .particle.p2 { width: 140px; height: 140px; left: 0; bottom: 50px; -webkit-animation: rotate 2s -1s linear infinite; -moz-animation: rotate 2s -1s linear infinite; animation: rotate 2s -1s linear infinite;
}
.cloud .particle.p3 { width: 200px; height: 200px; right: -100px; -webkit-animation: rotate 2s -1.5s linear infinite; -moz-animation: rotate 2s -1.5s linear infinite; animation: rotate 2s -1.5s linear infinite;
}
.cloud .raindrops { display: block; position: absolute; top: 115%; width: 100%;
}
.cloud .raindrops .drop { display: block; position: absolute; width: 11.11111px; height: 11.11111px; background: #DCE2EF; border-radius: 50% 0 50% 50%;
}
.cloud .raindrops .drop.d0 { left: 0%; -webkit-animation: fall 0.43333s 0s linear infinite; -moz-animation: fall 0.43333s 0s linear infinite; animation: fall 0.43333s 0s linear infinite;
}
.cloud .raindrops .drop.d1 { left: 6.66667%; -webkit-animation: fall 0.43333s -0.76471s linear infinite; -moz-animation: fall 0.43333s -0.76471s linear infinite; animation: fall 0.43333s -0.76471s linear infinite;
}
.cloud .raindrops .drop.d2 { left: 13.33333%; -webkit-animation: fall 0.43333s -1.52941s linear infinite; -moz-animation: fall 0.43333s -1.52941s linear infinite; animation: fall 0.43333s -1.52941s linear infinite;
}
.cloud .raindrops .drop.d3 { left: 20%; -webkit-animation: fall 0.43333s -2.29412s linear infinite; -moz-animation: fall 0.43333s -2.29412s linear infinite; animation: fall 0.43333s -2.29412s linear infinite;
}
.cloud .raindrops .drop.d4 { left: 26.66667%; -webkit-animation: fall 0.43333s -3.05882s linear infinite; -moz-animation: fall 0.43333s -3.05882s linear infinite; animation: fall 0.43333s -3.05882s linear infinite;
}
.cloud .raindrops .drop.d5 { left: 33.33333%; -webkit-animation: fall 0.43333s -3.82353s linear infinite; -moz-animation: fall 0.43333s -3.82353s linear infinite; animation: fall 0.43333s -3.82353s linear infinite;
}
.cloud .raindrops .drop.d6 { left: 40%; -webkit-animation: fall 0.43333s -4.58824s linear infinite; -moz-animation: fall 0.43333s -4.58824s linear infinite; animation: fall 0.43333s -4.58824s linear infinite;
}
.cloud .raindrops .drop.d7 { left: 46.66667%; -webkit-animation: fall 0.43333s -5.35294s linear infinite; -moz-animation: fall 0.43333s -5.35294s linear infinite; animation: fall 0.43333s -5.35294s linear infinite;
}
.cloud .raindrops .drop.d8 { left: 53.33333%; -webkit-animation: fall 0.43333s -6.11765s linear infinite; -moz-animation: fall 0.43333s -6.11765s linear infinite; animation: fall 0.43333s -6.11765s linear infinite;
}
.cloud .raindrops .drop.d9 { left: 60%; -webkit-animation: fall 0.43333s -6.88235s linear infinite; -moz-animation: fall 0.43333s -6.88235s linear infinite; animation: fall 0.43333s -6.88235s linear infinite;
}
.cloud .raindrops .drop.d10 { left: 66.66667%; -webkit-animation: fall 0.43333s -7.64706s linear infinite; -moz-animation: fall 0.43333s -7.64706s linear infinite; animation: fall 0.43333s -7.64706s linear infinite;
}
.cloud .raindrops .drop.d11 { left: 73.33333%; -webkit-animation: fall 0.43333s -8.41176s linear infinite; -moz-animation: fall 0.43333s -8.41176s linear infinite; animation: fall 0.43333s -8.41176s linear infinite;
}
.cloud .raindrops .drop.d12 { left: 80%; -webkit-animation: fall 0.43333s -9.17647s linear infinite; -moz-animation: fall 0.43333s -9.17647s linear infinite; animation: fall 0.43333s -9.17647s linear infinite;
}
.cloud .raindrops .drop.d13 { left: 86.66667%; -webkit-animation: fall 0.43333s -9.94118s linear infinite; -moz-animation: fall 0.43333s -9.94118s linear infinite; animation: fall 0.43333s -9.94118s linear infinite;
}
.cloud .raindrops .drop.d14 { left: 93.33333%; -webkit-animation: fall 0.43333s -10.70588s linear infinite; -moz-animation: fall 0.43333s -10.70588s linear infinite; animation: fall 0.43333s -10.70588s linear infinite;
}
.cloud .raindrops .drop.d15 { left: 100%; -webkit-animation: fall 0.43333s -11.47059s linear infinite; -moz-animation: fall 0.43333s -11.47059s linear infinite; animation: fall 0.43333s -11.47059s linear infinite;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg) scale(0.95); } 100% { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes rotate { 0% { -moz-transform: rotateZ(0deg); } 50% { -moz-transform: rotateZ(180deg) scale(0.95); } 100% { -moz-transform: rotateZ(360deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg) scale(0.95); -moz-transform: rotateZ(180deg) scale(0.95); -ms-transform: rotateZ(180deg) scale(0.95); -o-transform: rotateZ(180deg) scale(0.95); transform: rotateZ(180deg) scale(0.95); } 100% { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@-webkit-keyframes float { 0% { -webkit-transform: translate3d(-50%, -50%, 0); } 50% { -webkit-transform: translate3d(-50%, -40%, 0) scale(0.95); } 100% { -webkit-transform: translate3d(-50%, -50%, 0); }
}
@-moz-keyframes float { 0% { -moz-transform: translate3d(-50%, -50%, 0); } 50% { -moz-transform: translate3d(-50%, -40%, 0) scale(0.95); } 100% { -moz-transform: translate3d(-50%, -50%, 0); }
}
@keyframes float { 0% { -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 50% { -webkit-transform: translate3d(-50%, -40%, 0) scale(0.95); -moz-transform: translate3d(-50%, -40%, 0) scale(0.95); -ms-transform: translate3d(-50%, -40%, 0) scale(0.95); -o-transform: translate3d(-50%, -40%, 0) scale(0.95); transform: translate3d(-50%, -40%, 0) scale(0.95); } 100% { -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
}
@-webkit-keyframes fall { 0% { opacity: 0; -webkit-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); } 45% { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); } 100% { opacity: 0; -webkit-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); }
}
@-moz-keyframes fall { 0% { opacity: 0; -moz-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); } 45% { opacity: 1; -moz-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); } 100% { opacity: 0; -moz-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); }
}
@keyframes fall { 0% { opacity: 0; -webkit-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); -moz-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); -ms-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); -o-transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); transform: translate3d(500%, -500%, 0) scale(1) rotate3d(0, 0, 1, 45deg); } 45% { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); -moz-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); -ms-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); -o-transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); transform: translate3d(-100%, 0, 0) scale(1.1) rotate3d(0, 0, 0, 45deg); } 100% { opacity: 0; -webkit-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); -moz-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); -ms-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); -o-transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); transform: translate3d(-500%, 500%, 0) scale(0.2) rotate3d(0, 0, -1, 45deg); }
}
@-webkit-keyframes thunder { 0% { background: #2F4E66; } 9.99% { background: #2F4E66; } 10% { background: #6a8d9f; } 11% { background: #2F4E66; } 49.99% { background: #2F4E66; } 50% { background: #6a8d9f; } 51.01% { background: #2F4E66; } 54.99% { background: #2F4E66; } 55% { background: #6a8d9f; } 58% { background: #2F4E66; } 64.99% { background: #2F4E66; } 65% { background: #6a8d9f; } 65% { background: #2F4E66; } 68% { background: #6a8d9f; } 70% { background: #2F4E66; } 100% { background: #2F4E66; }
}
@-moz-keyframes thunder { 0% { background: #2F4E66; } 9.99% { background: #2F4E66; } 10% { background: #6a8d9f; } 11% { background: #2F4E66; } 49.99% { background: #2F4E66; } 50% { background: #6a8d9f; } 51.01% { background: #2F4E66; } 54.99% { background: #2F4E66; } 55% { background: #6a8d9f; } 58% { background: #2F4E66; } 64.99% { background: #2F4E66; } 65% { background: #6a8d9f; } 65% { background: #2F4E66; } 68% { background: #6a8d9f; } 70% { background: #2F4E66; } 100% { background: #2F4E66; }
}
@keyframes thunder { 0% { background: #2F4E66; } 9.99% { background: #2F4E66; } 10% { background: #6a8d9f; } 11% { background: #2F4E66; } 49.99% { background: #2F4E66; } 50% { background: #6a8d9f; } 51.01% { background: #2F4E66; } 54.99% { background: #2F4E66; } 55% { background: #6a8d9f; } 58% { background: #2F4E66; } 64.99% { background: #2F4E66; } 65% { background: #6a8d9f; } 65% { background: #2F4E66; } 68% { background: #6a8d9f; } 70% { background: #2F4E66; } 100% { background: #2F4E66; }
}
Pure css rain - Script Codes
Pure css rain - Script Codes
Home Page Home
Developer Martin Grand
Username martingrand
Uploaded August 11, 2022
Rating 3
Size 4,855 Kb
Views 40,480
Do you need developer help for Pure css rain?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Grand (martingrand) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!