<html>
<head>
<title>demo</title>
<style>
.outer{position: relative;transition: 2s all ease;max-width: 400px;margin:200px auto;}
.outer img{width: 100%;}
.outer:hover .over5{transform: scale(2);transition: 1.5s all ease;opacity: 0.1;}
.circle{width:150px;height:150px;border-radius: 50%;border:2px solid ;}
.over1 {
position: absolute;
text-align: center;
z-index: 10;
background-color: transparent;
opacity: 1;
border: 1px solid #b7985b;
border-radius: 100%;
animation: pulseplaybutton 4s linear infinite;
animation-delay:0ms;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
box-shadow: 0 0 7px -3px #000;
}
.over2 {
position: absolute;
text-align: center;
z-index: 10;
background-color: transparent;
opacity: 1;
border: 1px solid #b7985b;
border-radius: 100%;
animation: pulseplaybutton 4s linear infinite;
animation-delay: 1000ms;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
box-shadow: 0 0 7px -3px #000;
}
.over3 {
position: absolute;
text-align: center;
z-index: 10;
background-color: transparent;
opacity: 1;
border: 1px solid #b7985b;
border-radius: 100%;
animation: pulseplaybutton 4s linear infinite;
animation-delay: 2s;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
box-shadow: 0 0 7px -3px #000;
}
.over4 {
position: absolute;
text-align: center;
z-index: 10;
background-color: transparent;
opacity: 1;
border: 1px solid #b7985b;
border-radius: 100%;
animation: pulseplaybutton 3s linear infinite;
animation-delay: 1000ms;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
box-shadow: 0 0 7px -3px #000;
}
.over5 {
position: absolute;
text-align: center;
z-index: 10;
background-color: transparent;
opacity: 1;
border: 0.5px solid #b7985b;
border-radius: 100%;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition: 0s all ease;
transform: scale(1);
box-shadow: 0 0 7px -3px #000;
}
@keyframes pulseplaybutton {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; }
25% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
opacity: 0.3; }
100% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2); } }
</style>
</head>
<body>
<div class="outer">
<div class="circle"></div>
<div class="over over1"></div>
<div class="over over2"></div>
<div class="over over3"></div>
<div class="over over4"></div>
<div class="over over5"></div>
</div>
</body>
</html>
No comments:
Post a Comment