回転グラデーションの背景なしjs

Question

私はCSSのグラデーションアニメーションを実験していますが、安定したdivの正方形で回転するグラデーションを取得する方法はわかりません。

here is my fiddle

.navigation__logo__wrap { 
 
    position: fixed; 
 
    left:0;top:0;right:0;bottom:0; 
 
    overflow: visible; 
 
    z-index: -1; 
 
} 
 
.navigation__logo { 
 
    position:absolute; 
 
    left:100px;top:100px;width:100%;height:100%; 
 
    padding:0;margin:0; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: rgba(246,100,55,1); 
 
    background: -moz-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%); 
 
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(246,100,55,1)), color-stop(19%, rgba(246,100,55,1)), color-stop(37%, rgba(244,53,47,1)), color-stop(37%, rgba(246,100,55,1)), color-stop(56%, rgba(244,53,47,1)), color-stop(92%, rgba(246,101,57,1)), color-stop(100%, rgba(246,101,57,1))); 
 
    background: -webkit-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%); 
 
    background: -o-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%); 
 
    background: -ms-linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%); 
 
    background: linear-gradient(45deg, rgba(246,100,55,1) 0%, rgba(246,100,55,1) 19%, rgba(244,53,47,1) 37%, rgba(246,100,55,1) 37%, rgba(244,53,47,1) 56%, rgba(246,101,57,1) 92%, rgba(246,101,57,1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f66437', endColorstr='#f66539', GradientType=1); 
 
    animation: spin 5s linear infinite; 
 
    -moz-animation: spin 5s linear infinite; 
 
    -webkit-animation: spin 5s linear infinite; 
 
    -ms-animation: spin 5s linear infinite; 
 
} 
 

 
@keyframes spin { 
 
from { transform: scale3d(2,2,1) rotateZ(0deg); } 
 
to { transform: scale3d(2,2,1) rotateZ(360deg); } 
 
} 
 
@-moz-keyframes spin { 
 
from { -moz-transform: scale3d(2,2,1) rotateZ(0deg); } 
 
to { -moz-transform: scale3d(2,2,1) rotateZ(360deg); } 
 
} 
 
@-webkit-keyframes spin { 
 
from { -webkit-transform: scale3d(2,2,1) rotateZ(0deg); } 
 
to { -webkit-transform: scale3d(2,2,1) rotateZ(360deg); } 
 
} 
 
@-ms-keyframes spin { 
 
from { -ms-transform: scale3d(2,2,1) rotateZ(0deg); } 
 
to { -ms-transform: scale3d(2,2,1) rotateZ(360deg); } 
 
}

<div class="navigation__logo__wrap"> 
 
    <div class="navigation__logo"></div> 
 
</div>

あなたは広場全体がバックグラウンドで回転している瞬間に見ることができるように。しかし、私は正方形のdivが安定していて、ちょうどそのグランシー効果を得るために回転するバックグラウンドが必要です。私はどんなjsも使いたくない。

あなたが私を助けることを願って、 事前に感謝！

Answer 1

あなたはoverflow: hidden;に、ラッパーのdivを設定し、回転子よりも、それを小さくすることができます。

.navigation__logo__wrap { 
 
    position: fixed; 
 
    left: 50px; 
 
    top: 50px; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 50px; 
 
    overflow: hidden; 
 
} 
 
.navigation__logo { 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: rgba(246, 100, 55, 1); 
 
    background: -moz-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%); 
 
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(246, 100, 55, 1)), color-stop(19%, rgba(246, 100, 55, 1)), color-stop(37%, rgba(244, 53, 47, 1)), color-stop(37%, rgba(246, 100, 55, 1)), color-stop(56%, rgba(244, 53, 47, 1)), color-stop(92%, rgba(246, 101, 57, 1)), color-stop(100%, rgba(246, 101, 57, 1))); 
 
    background: -webkit-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%); 
 
    background: -o-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%); 
 
    background: -ms-linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%); 
 
    background: linear-gradient(45deg, rgba(246, 100, 55, 1) 0%, rgba(246, 100, 55, 1) 19%, rgba(244, 53, 47, 1) 37%, rgba(246, 100, 55, 1) 37%, rgba(244, 53, 47, 1) 56%, rgba(246, 101, 57, 1) 92%, rgba(246, 101, 57, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f66437', endColorstr='#f66539', GradientType=1); 
 
    animation: spin 5s linear infinite; 
 
    -moz-animation: spin 5s linear infinite; 
 
    -webkit-animation: spin 5s linear infinite; 
 
    -ms-animation: spin 5s linear infinite; 
 
} 
 
@keyframes spin { 
 
    from { 
 
    transform: scale3d(2, 2, 1) rotateZ(0deg); 
 
    } 
 
    to { 
 
    transform: scale3d(2, 2, 1) rotateZ(360deg); 
 
    } 
 
} 
 
@-moz-keyframes spin { 
 
    from { 
 
    -moz-transform: scale3d(2, 2, 1) rotateZ(0deg); 
 
    } 
 
    to { 
 
    -moz-transform: scale3d(2, 2, 1) rotateZ(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes spin { 
 
    from { 
 
    -webkit-transform: scale3d(2, 2, 1) rotateZ(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: scale3d(2, 2, 1) rotateZ(360deg); 
 
    } 
 
} 
 
@-ms-keyframes spin { 
 
    from { 
 
    -ms-transform: scale3d(2, 2, 1) rotateZ(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: scale3d(2, 2, 1) rotateZ(360deg); 
 
    } 
 
}

<div class="navigation__logo__wrap"> 
 
    <div class="navigation__logo"></div> 
 
</div>