rotierenden Gradienten Hintergrund keine js

Question

Ich experimentiere mit CSS Gradienten Animationen jetzt, aber ich kann nicht herausfinden, wie man einen rotierenden Gradienten auf einem festen div-Quadrat zu bekommen.

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>

, wie Sie im Moment der ganze Platz mit dem Hintergrund dreht sehen kann. aber ich möchte, dass das quadratische div stetig ist und nur der Hintergrund rotiert, um diesen Glanzeffekt zu erhalten. Ich möchte keine js verwenden.

hoffe du kannst mir helfen, danke im voraus!

Answer 1

Sie können die Wrapper-div auf overflow: hidden; gesetzt und es kleiner ist als die Dreh Kind machen:

.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>