web/Style

[CSS] 테두리 이펙트1 (feat. very peri)

모리노아진 2022. 2. 14. 20:00

highlight something

     
(try cursor over here)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
<style>
body{
    text-align: center;
}
@keyframes spinping_border {
    0% {
        left: -75%;
        top: -75%;
        transform: rotate(0deg);
    }
    25%{
        left: -25%;
        top: -75%;
        transform: rotate(90deg);
    }
    50%{
        left: -25%;
        top: -25%;
        transform: rotate(180deg);
    }
    75%{
        left: -75%;
        top: -25%;
        transform: rotate(270deg);
    }
    100% {
        left: -75%;
        top: -75%;
        transform: rotate(360deg);
    }
}
 .wrap.css_effect{
    background: white;
    border-radius: 10px;
    display: inline-block;
    height: 100px;
    overflow: hidden;
    padding: 3px;
    position: relative;
    width: 200px;
    z-index: 10;
}
.css_effect .inner, .css_effect .hover_inner {
    background: white;
    border-radius: 12px;
    display: inline-block;
    height: 80px;
    padding: 10px;
    position: relative;
    width: 180px;
}
.css_effect .inner:before, .css_effect .hover_inner:hover:before {
    animation: spinping_border 2s infinite linear;
    background: conic-gradient(#ffffff 0%, #FFFFFF 50%, #6667AB 100%);
    background-size: 100% 100%;
    border-radius: 0;
    content: "";
    height: 200%;
    left: -75%;
    position: absolute;
    top: -75%;
    width: 200%;
    z-index: -1;
}
</style>
</head>
<body>

<div class="wrap css_effect">
    <div class="inner"><p>highlight something</p></div>
</div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<div class="wrap css_effect">
    <div class="hover_inner"><b>(try cursor over here)</b></div>
</div>

</body>
</html>