<h3>Animates on hover (CSS <code><a href="https://caniuse.com/mdn-css_at-rules_property">@property</a></code>)</h3>
<div id="chart"></div>
@property --n {
syntax: '<percentage>';
inherits: true;
initial-value: 30%;
}
#chart{
width: 300px;
height: 300px;
margin: calc(50vh - 150px) auto auto auto;
--n: 30%; /*declaration for browsers with no @property support */
background:
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><foreignObject width='300px' height='300px'><body style='margin:0;text-align:center;color:transparent;' xmlns='http://www.w3.org/1999/xhtml'><div style='text-shadow: 0 0 limegreen;font:200px/300px serif;background:white;'>🍏</div><div style='text-shadow:0 0 white;font:170px/300px serif;position:relative;top:-300px;'>🍏</div></body></foreignObject></svg>"),
conic-gradient(transparent var(--n), darkseagreen var(--n));
background-blend-mode: screen;
transition: --n 2s ease-in-out
}
#chart:hover{ --n: 70%; }
h3{
text-align: center;
position: absolute;
margin: auto;
left: 0;
right: 0;
font-family: Cochin;
font-size: 13pt;
width: 300px;
}
code{
font-size: 12pt;
font-weight: normal;
}
a:link{
text-decoration: solid lime underline;
-webkit-text-decoration: solid lime underline;
color: black;
}
body{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.