<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<button type="button" class="btn-icon sound-toggle spread-bar-sound playing">
<i class="sound-toggle-bar"></i>
<i class="sound-toggle-bar"></i>
<i class="sound-toggle-bar"></i>
<!--<i class="sound-toggle-bar"></i>
<i class="sound-toggle-bar"></i>-->
</button>
<style>
.spread-bar-sound {display: block;}
.btn-icon {font-size: 14px;}
.btn-icon {-moz-user-select: none;-webkit-user-select: none;background:none;border: none;font-size: 11px;min-height: 30px;min-width: 30px;padding: 0;text-align: center;transform: rotate(-90deg);cursor:pointer;-moz-transformrotate(-90deg);-webkit-transform: rotate(-90deg);vertical-align: middle;}
.sound-toggle-bar{display:block;float:left;width:2px;height:21px;margin-right:4px;background:#f9a63e;-webkit-transform:scale(1, 0.1);transform: scale(1, 0.1);-webkit-transform-origin:bottom;transform-origin:bottom }
.playing .sound-toggle-bar {-webkit-animation:sound-toggle 2s infinite;animation:sound-toggle 2s infinite;background:#95C93D;}
.playing .sound-toggle-bar:nth-child(2){-webkit-animation-delay:1.2s;animation-delay:1.2s;background:#EB9E21;}
.playing .sound-toggle-bar:nth-child(3){-webkit-animation-delay: .3s;animation-delay: .3s;background:#26ADD9;}
.playing .sound-toggle-bar:nth-child(4) {-webkit-animation-delay:1.7s;animation-delay:1.7s;background:#13a388;}
.playing .sound-toggle-bar:nth-child(5) {-webkit-animation-delay:.4s;animation-delay: .4s;background:#126882;}
@-webkit-keyframes sound-toggle {
0% {
-webkit-transform:scale(1, 0.1);
transform:scale(1, 0.1)
}
25% {
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
50% {
-webkit-transform:scale(1, 0.3);
transform:scale(1, 0.3)
}
75% {
-webkit-transform:scale(1, 0.6);
transform:scale(1, 0.6)
}
100% {
-webkit-transform:scale(1, 0.1);
transform:scale(1, 0.1)
}
}
@keyframes sound-toggle {
0% {
-webkit-transform:scale(1, 0.1);
transform:scale(1, 0.1)
}
25% {
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
50% {
-webkit-transform:scale(1, 0.3);
transform:scale(1, 0.3)
}
75% {
-webkit-transform:scale(1, 0.6);
transform:scale(1, 0.6)
}
100% {
-webkit-transform:scale(1, 0.1);
transform:scale(1, 0.1)
}
}
</style>
</body>
</html>
Hello,
No comments:
Post a Comment