반응형

trick을 이용하여 테두리에 그라데이션, 애니메이션을 넣을 수 있다.

 

테두리가 될 그라데이션 이미지(ex : 100x100px)를 준비하고

 

프로필사진을 넣을 이미지(ex : 95x95px)를 준비한다.

 

 

95x95px

 

100x100px

 

그라데이션 이미지에 쓰일 색감은 아래 링크에서 참고해보자.

https://webkul.github.io/coolhue/

 

Gradient Colors Collection Palette - CoolHue 2.0

Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as image too.

webkul.github.io

 

 

 

 

위와 같이 css를 이용하여 두 이미지를 겹치고 애니메이션을 적용하면 된다.

 

<div class="profile_wrapper">
    <div class="gradation_animate"></div>
    <div class="image_wrapper">
        <img class="image" src="https://k.kakaocdn.net/dn/cxzhEK/btqzv6kQW0A/3UIhw0S52V3kPK0QTEHPT0/img.png">
    </div>
</div>

 

.profile_wrapper {
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 15px 0 36px;
    position: relative;
}

.gradation_animate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(https://k.kakaocdn.net/dn/BQFZF/btqzu7xZvy9/p3qATq2IbK4edXbUm76pTK/img.png) no-repeat;
    animation: spin 1s linear infinite;
}

.image_wrapper {
    position: relative;
    overflow: hidden;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

.image {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    margin: auto;
    height: 92px;
    min-width: 100%;
    min-height: 100%;
}

 

 

반응형

'Basic > HTML & CSS' 카테고리의 다른 글

Crocus favicon design  (0) 2019.12.16
특정 element를 drag 할 수 없도록 만들기  (0) 2019.11.04
CSS with INTERTWINED(네온 웨이브)  (0) 2019.10.03
CSS를 이용한 scattering hexagons  (0) 2019.09.29
css를 이용한 Animation 제작  (0) 2019.09.18