css边框加载动画

在主元素基础上通过伪类再生成一个稍大的元素,并旋转90度并位移出去,主元素设置overflow:hidden,让伪元素旋转位移回原本位置,产生边框加载的效果

效果图:

原理图:

代码示例:

body {
    
    
    /* background: #000; */
    /* background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); */
    /* background-color: #ebecf0; */
    font-family: 'Lobster', cursive;
    perspective: 160vmin;
    overflow: hidden;
}
div {
    
    
    position: relative;
    margin: auto;
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    overflow: hidden;
    
}
div::after {
    
    	//展示的元素
    content: "Hover Me";
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    left: 4px;
    line-height: 92px;
    font-size: 24px;
    background: #fff;
    border: 2px solid yellowgreen;
    cursor: pointer;
    color: yellowgreen;
}

div::before {
    
    	//稍大的元素进行位移旋转
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -20px;
    left: 0px;
    background:yellowgreen;
    transform: rotateZ(-90deg) translate(-100%, -100%);
    transform-origin: top left;
    transition: transform .3s;
    transition-timing-function: linear;
}

div:hover::before {
    
    
    transform: rotateZ(0deg) translate(0%, -0%);
}