Skip to content

Instantly share code, notes, and snippets.

@PassionPenguin
Created March 27, 2020 08:31
Show Gist options
  • Save PassionPenguin/27285a5f62d826b60aaf9c50c18ba33f to your computer and use it in GitHub Desktop.
Save PassionPenguin/27285a5f62d826b60aaf9c50c18ba33f to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SuccessNFail</title>
<style>
svg {
transition: 400ms;
opacity: 0;
}
circle {
fill: transparent;
stroke-width: 4px;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
transition: 800ms ease-in-out;
transition-delay: 200ms;
}
polyline {
fill: transparent;
stroke-width: 5px;
opacity: 0;
transition: 400ms;
}
button {
display: inline-block;
margin: 20px auto;
width: 144px;
height: 44px;
border: 1px solid #000;
border-radius: 5px;
background: transparent;
outline: none;
font: 16px/1 "Material Icons";
cursor: pointer;
transition: 500ms;
}
.tbutton {
display: block;
margin: 0 auto;
width: 294px;
}
button:hover, button:focus {
background: #00000022;
}
.active circle {
stroke-dashoffset: 761;
}
.active polyline {
opacity: 1;
}
.active {
opacity: 1;
}
.Fail polyline {
transition: 600ms cubic-bezier(0.33, 0.24, 0.83, 1.25);
transition-delay: 200ms;
transform: translateY(120px);
}
.Fail.active polyline {
transform: translate(0);
}
.Success polyline {
stroke-dasharray: 65;
stroke-dashoffset: 60;
}
.Success.active polyline {
stroke-dashoffset: 0;
}
svg {
transform: translate(100px, 44px);
}
text {
font: 24px/1 Anodina;
transform: translate(-100px, 44px);
opacity: 0;
}
.active text {
opacity: 1;
transform: translate(100px, 44px);
}
</style>
</head>
<body>
<svg class="Success" xmlns="http://www.w3.org/2000/svg">
<circle r="38" cx="40" cy="40" stroke="#8BC34A" transform="rotate(-90 40 40)"/>
<!-- stroke = 4px, 1/2 * 4px + 38px = 40px -->
<polyline points="20,35 35,55 60,25" stroke="#8BC34A"/>
<text>Love it~</text>
</svg>
<svg class="Fail" xmlns="http://www.w3.org/2000/svg">
<circle r="38" cx="40" cy="40" stroke="#F44336" transform="rotate(-90 40 40)"/>
<!-- stroke = 4px, 1/2 * 4px + 38px = 40px -->
<polyline points="25,55 55,25" stroke="#F44336"/>
<polyline points="25,25 55,55" stroke="#F44336"/>
<text>Fail to dislike :)</text>
</svg>
<hr>
<div class="tbutton">
<button onclick="document.querySelector('.Success').classList.add('active');"><span class="mi">thumb_up</span>
</button>
<button onclick="document.querySelector('.Fail').classList.add('active');">thumb_down</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment