Using CSS3, with help from Shak Dizzle, manage come up with a different icon transition, can be handy for web app's handling with multimedia such as audio and video.
A Pen by Paul Stewart on CodePen.
<div class="play"><span></span></div> |
Using CSS3, with help from Shak Dizzle, manage come up with a different icon transition, can be handy for web app's handling with multimedia such as audio and video.
A Pen by Paul Stewart on CodePen.
$('.play').click(function(){ | |
$(this).toggleClass('active'); | |
}); |
body { | |
background:#333333; | |
} | |
span { | |
height: 80px; | |
width: 80px; | |
display: block; | |
position: relative; | |
top: 0; | |
left: 0; | |
text-indent: -9999px; | |
} | |
span:before, | |
span:after { | |
-webkit-transition: all 0.5s; | |
-moz-transition: all 0.5s; | |
-o-transition: all 0.5s; | |
transition: all 0.5s; | |
} | |
.play { | |
width: 80px; | |
height: 80px; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin:-40px 0 0 -40px; | |
display: Block; | |
} | |
.play span { | |
margin: 0; | |
} | |
.play span:before { | |
content: ''; | |
height: 0px; | |
width: 0px; | |
display: block; | |
background: transparent; | |
border: 20px transparent solid; | |
border-right-width: 0; | |
border-left-color: #ffffff; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin: -20px 0 0 -10px; | |
} | |
.play span:after { | |
content: ''; | |
height: 0px; | |
width: 0px; | |
display: block; | |
background: transparent; | |
border: 0px transparent solid; | |
border-right-width: 0; | |
border-left-color: #ffffff; | |
position: absolute; | |
top: calc(50% + 10px); | |
left: 50%; | |
margin: -20px 0 0 -10px; | |
} | |
.play.active { | |
position: absolute; | |
width: 80px; | |
height: 80px; | |
left: 50%; | |
top: 50%; | |
z-index: 0; | |
} | |
.play.active span:before { | |
content: ''; | |
border: 5px #ffffff solid; | |
border-top-width: 40px; | |
border-bottom-width: 0; | |
left: 37.5%; | |
} | |
.play.active span:after { | |
content: ''; | |
border: 5.333333333333333px #ffffff solid; | |
border-bottom-width: 0; | |
border-top-width: 40px; | |
left: 62.5%; | |
top: 50%; | |
} |