Pure CSS3 Background Pulse Animation Effect
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Pulse Effects</title>
</head>
<body>
<section>
<div class="bhPulse">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
</body>
</html>
style.css
body{
margin: 0;
padding: 0;
}
section{
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
animation: bgColor 20s linear infinite;
}
.bhPulse{
width: 100%;
height: 100%;
}
.bhPulse span{
position: absolute;
width: 80px;
height: 80px;
background: #fff;
animation: animate 10s linear infinite;
}
@keyframes animate {
0%{
transform: scale(0) translateY(0) rotate(0deg);
opacity: 1;
}
100%{
transform: scale(1) translateY(-100px) rotate(360deg);
opacity: 0;
}
}
@keyframes bgColor {
0%{
background: #f44336;
}
25%{
background: #03a9f4;
}
50%{
background: #9c27b0;
}
75%{
background: #f44336;
}
100%{
background: #00ff0a;
}
}
.bhPulse span:nth-child(1){
top: 50%;
left: 20%;
animation: animate 10s linear infinite;
}
.bhPulse span:nth-child(3n+1){
background: transparent;
border: 5px solid #fff;
}
.bhPulse span:nth-child(2){
top: 80%;
left: 40%;
animation: animate 12s linear infinite;
}
.bhPulse span:nth-child(3){
top: 10%;
left: 65%;
animation: animate 15s linear infinite;
}
.bhPulse span:nth-child(4){
top: 50%;
left: 70%;
animation: animate 6s linear infinite;
}
.bhPulse span:nth-child(5){
top: 10%;
left: 30%;
animation: animate 9s linear infinite;
}
.bhPulse span:nth-child(6){
top: 90%;
left: 95%;
animation: animate 8s linear infinite;
}
.bhPulse span:nth-child(7){
top: 80%;
left: 5%;
animation: animate 5s linear infinite;
}
.bhPulse span:nth-child(8){
top: 35%;
left: 50%;
animation: animate 14s linear infinite;
}
.bhPulse span:nth-child(9){
top: 5%;
left: 5%;
animation: animate 11s linear infinite;
}
.bhPulse span:nth-child(10){
top: 25%;
left: 90%;
animation: animate 10s linear infinite;
}
No comments:
Post a Comment