css实现 头像内容过渡效果

 

当鼠标滑动上去后

 

 

 

<img src="@/assets/img/avatar.png" alt="">

css代码

//计算外边框缩小 （s*f -s）/2 /f
img{
    --s: 200px;
    --c1: rgb(0, 0, 0, 1);
    --c2: rgba(170, 170, 170, 1);
    --b: 5px; 
    --f: 1;
    --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%;
    --shink:calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));

    width: var(--s);
    height: var(--s);
    padding-top: 100px;
    outline: var(--b) solid var(--c1);
    outline-offset: var(--shink);
    border-radius: 0 0 999px 999px;
    transform: scale(var(--f));
    transition: .5s;
    background: radial-gradient(
        circle closest-side, 
        var(--c2) calc(99% - var(--b)),
        var(--c1) calc(100% - var(--b)),
        var(--c1) 99%,
        transparent 100%
    ) var(--bgOption);

    mask: linear-gradient(#000 0 0) 
                no-repeat center 
                calc(0px - var(--shink)) / calc(100% / var(--f) - 2 * var(--b)) 50%, 
    radial-gradient(
        circle closest-side, 
        #000 99%, 
        transparent
    ) var(--bgOption);
}

img:hover {
    --f: 1.35
}