CSS 头像伸头动画
2023-03-29 本文已影响0人
Cherry丶小丸子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #E0E4CC;
}
img {
--s: 280px;
--b: 5px;
--c: #C02942;
--f: 1;
width: var(--s);
aspect-ratio: 1;
padding-top: calc(var(--s)/5);
cursor: pointer;
border-radius: 0 0 999px 999px;
--_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
--_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
outline: var(--b) solid var(--c);
outline-offset: var(--_o);
background:
radial-gradient(
circle closest-side,
#ECD078 calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
) var(--_g);
-webkit-mask:
linear-gradient(#000 0 0) no-repeat
50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
transform: scale(var(--f));
transition: .5s;
}
img:hover {
--f: 1.35;
}
</style>
</head>
<body>
<img src="https://assets.codepen.io/1480814/av+1.png" alt="a random avatar picture" >
</body>
</html>
