CSS 회전 육각형 색이있는 육각 렌

Question

회전하는 그라데이션 테두리가있는 육각형 모양을 만들고 싶습니다.

예 GIF : 만하지만 작동하지 않았다 CSS를 사용하여 모양을 만드는 시도

때문에 : 후 : 태그는 더 인 모양을 만들 수 없습니다 테두리 스타일을 사용하기 전에.

나는 .svg 파일을 사용하고 배경 이미지로로드하지만 국경을 변경하고

가 마지막으로 나는 GIF를 삽입하려고 국경을 회전 CSS 애니메이션을 추가 할 수 없습니다 시도했지만 같은 흰색 후광 등의 문제가 있었다 모양 주위. 내 배경이 어두워서 매우 눈에.니다.

그래서 지정된 애니메이션에 이러한 모양을 삽입하는 가장 좋은 방법은 무엇입니까?

P. 어떤 도움

<div id='hex'></div>

감사 : 나는 단순히 모양을 삽입 할 때문에 인라인 SVG는 같은 옵션을 선택하지 않습니다.

Answer 1

아마도 애니메이션 GIF 또는 SVG 솔루션이이 상황에 도달하는 방법 일 수 있습니다.

부유 웨 우와 우트, 실험을 위해 여기 CSS 솔루션이 있습니다. - 것을 수행하는 방법에 대한이 CSSTricks article 모든 신용

1. 는
2. 내부 요소를 추가 육각형을 만들기 위해 육각형 clip-mask 인 요소를 만들고 원추형 그라데이션을 적용

   여기에 기본적인 아이디어

3. 원뿔 그라디언트를 사용하여 요소를 만들려면 애니메이션 적용
4. 중간에 공백을 만들려면 약간 작은 육각형을 중첩하십시오.

최종 효과는 회전하는 그라디언트가있는 경계선을 만듭니다.

여기에는 몇 가지 단점이 있습니다. 하나는 투명한 것이 아니므로 안쪽 육각형 색상은 요소 배경과 일치하도록 설정해야합니다. 요소 배경은 단색 배경 색상에서만 작동합니다. 더 큰 문제는 브라우저 지원입니다. clip-path 속성은 모든 브라우저에서 지원되지 않습니다.

.container { 
 
    position: relative; 
 
} 
 

 
.clip { 
 
    position: absolute; 
 
    top: 0.50em; 
 
    left: 0.50em; 
 
    width: 8em; 
 
    height: 8em; 
 
    -webkit-clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%); 
 
    clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%); 
 
    background-color: #ffffff; 
 
} 
 

 
.wheel, 
 
.umbrella, 
 
.color { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    width: 9em; 
 
    height: 9em; 
 
} 
 

 
.wheel { 
 
    -webkit-clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%); 
 
    clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%); 
 
    width: 9em; 
 
    height: 9em; 
 
    position: relative; 
 
} 
 

 
.umbrella { 
 
    position: relative; 
 
    -webkit-filter: blur(1.4em); 
 
    -webkit-transform: scale(1.15); 
 
    will-change: transform; 
 
    animation: 3s linear rotate; 
 
    animation-iteration-count: infinite; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
.color, 
 
.color:nth-child(n+7):after { 
 
    clip: rect(0, 9em, 9em, 4.5em); 
 
} 
 

 
.color:after, 
 
.color:nth-child(n+7) { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    left: calc(50% - 4.5em); 
 
    top: calc(50% - 4.5em); 
 
    width: 9em; 
 
    height: 9em; 
 
    clip: rect(0, 4.5em, 9em, 0); 
 
} 
 

 
.color:nth-child(1):after { 
 
    background-color: #9ED110; 
 
    transform: rotate(30deg); 
 
    z-index: 12; 
 
} 
 

 
.color:nth-child(2):after { 
 
    background-color: #50B517; 
 
    transform: rotate(60deg); 
 
    z-index: 11; 
 
} 
 

 
.color:nth-child(3):after { 
 
    background-color: #179067; 
 
    transform: rotate(90deg); 
 
    z-index: 10; 
 
} 
 

 
.color:nth-child(4):after { 
 
    background-color: #476EAF; 
 
    transform: rotate(120deg); 
 
    z-index: 9; 
 
} 
 

 
.color:nth-child(5):after { 
 
    background-color: #9f49ac; 
 
    transform: rotate(150deg); 
 
    z-index: 8; 
 
} 
 

 
.color:nth-child(6):after { 
 
    background-color: #CC42A2; 
 
    transform: rotate(180deg); 
 
    z-index: 7; 
 
} 
 

 
.color:nth-child(7):after { 
 
    background-color: #FF3BA7; 
 
    transform: rotate(180deg); 
 
} 
 

 
.color:nth-child(8):after { 
 
    background-color: #FF5800; 
 
    transform: rotate(210deg); 
 
} 
 

 
.color:nth-child(9):after { 
 
    background-color: #FF8100; 
 
    transform: rotate(240deg); 
 
} 
 

 
.color:nth-child(10):after { 
 
    background-color: #FEAC00; 
 
    transform: rotate(270deg); 
 
} 
 

 
.color:nth-child(11):after { 
 
    background-color: #FFCC00; 
 
    transform: rotate(300deg); 
 
} 
 

 
.color:nth-child(12):after { 
 
    background-color: #EDE604; 
 
    transform: rotate(330deg); 
 
}

<div class="container"> 
 
    <div class="wheel"> 
 
    <ul class="umbrella"> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
     <li class="color"></li> 
 
    </ul> 
 
    </div> 
 
    <div class="clip"></div> 
 
</div>

는