Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
.circle{
height: 100px;
width: 50px;
position: relative;
top: 0;
left: 0;
background: white;
}
.circle:hover:before, .circle:hover:after{
transform: rotate(45deg);
opacity: 1;
}
.circle:before{
content: '';
height: 98px;
width: 98px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border: 1px red solid;
border-color: red red transparent transparent;
border-radius: 50%;
transform: rotate(-135deg);
transition: transform 5s ease-in;
}
.circle:after{
content: '';
height: 98px;
width: 98px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border: 1px red solid;
border-color: transparent transparent red red;
opacity: 0;
border-radius: 50%;
transform: rotate(-135deg);
transition: transform 5s ease-out, opacity .1s 5s;
}
<div class="circle">test</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment