Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created May 17, 2013 01:15
Show Gist options
  • Save anonymous/5596319 to your computer and use it in GitHub Desktop.
Save anonymous/5596319 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 / CSS3 Circle with Partial Border
Raw
dabblet.css
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
html {
display: table;
width: 100%;
height: 100%;
background: #222 url(http://cdn1.sbnation.com/entry_photo_images/8217543/20130310-625A3566VERGE_large_verge_medium_landscape.jpg) center;
background-size: cover;
overflow: hidden;
}
body {
display: table-cell;
vertical-align: middle;
}
.circle {
position: relative;
margin: 3em auto;
width: 15em; height: 15em;
border-radius: 50%;
background: hsla(200,100%,50%,.125);
box-shadow: 0 0 .5em #0af inset,
0 0 .5em #0af,
0 0 .125em 3em rgba(0,0,0,.25);
}
.arc {
overflow: hidden;
position: absolute;
top: -3em; right: 50%; bottom: 50%; left: -3em;
transform-origin: 100% 100%;
animation-fill-mode: both;
z-index: -1;
}
.arc::before {
content: '';
display: block;
box-sizing: border-box;
border: solid 3em hsla(200,100%,60%,.75);
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-90deg);
}
.circle:hover > .arc::before {
transform: skewX(0deg);
}
.circle:hover > .arc:nth-child(1),
.circle:hover > .arc:nth-child(1)::before {
transition: transform 1s linear 0s;
}
.circle:hover > .arc:nth-child(2),
.circle:hover > .arc:nth-child(2)::before {
transition: transform 1s linear 1s;
}
.circle:hover > .arc:nth-child(3),
.circle:hover > .arc:nth-child(3)::before {
transition: transform 1s linear 2s;
}
.circle:hover > .arc:nth-child(4),
.circle:hover > .arc:nth-child(4)::before {
transition: transform 1s linear 3s;
}
.arc:nth-child(1) {
transform: rotate(90deg) skewX(90deg);
}
.circle:hover > .arc:nth-child(1) {
transform: rotate(90deg) skewX(0deg);
}
.arc:nth-child(2) {
transform: rotate(180deg) skewX(90deg);
}
.circle:hover > .arc:nth-child(2) {
transform: rotate(180deg) skewX(0deg);
}
.arc:nth-child(3) {
transform: rotate(270deg) skewX(90deg);
}
.circle:hover > .arc:nth-child(3) {
transform: rotate(270deg) skewX(0deg);
}
.arc:nth-child(4) {
transform: rotate(360deg) skewX(90deg);
}
.circle:hover > .arc:nth-child(4) {
transform: rotate(360deg) skewX(0deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='circle'>
<div class='arc'></div>
<div class='arc'></div>
<div class='arc'></div>
<div class='arc'></div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment