Pure css rain
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 - 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; }
}
Developer | Martin Grand |
Username | martingrand |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 4,855 Kb |
Views | 40,480 |
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!
Name | Size |
Pure css loader | 3,918 Kb |
The easiest way to centering a fluid element vertically, and horizontally | 1,817 Kb |
Birthday Cake | 3,047 Kb |
Seconds counter | 4,152 Kb |
Animated captcha concept | 2,723 Kb |
Clock | 3,520 Kb |
A Pen by Martin Grand | 3,261 Kb |
Switch | 3,122 Kb |
Pure css christmas tree | 3,621 Kb |
Coming soon page for pixelbrain.io | 4,794 Kb |
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!
Name | Username | Size |
Magnus 3 | ARocketfish | 7,944 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
React Template | Isac | 1,241 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Atom | Bhlaird | 1,932 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!