美文网首页
CSS 头像伸头动画

CSS 头像伸头动画

作者: Cherry丶小丸子 | 来源:发表于2023-03-29 16:56 被阅读0次
    <!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>
    

    相关文章

      网友评论

          本文标题:CSS 头像伸头动画

          本文链接:https://www.haomeiwen.com/subject/vjifddtx.html