@kitas

Как можно исправить ошибку с постоянной загрузкой элемента?

5c14dcfd1edb6909941343.jpeg
Я сделал взял кубик 3D c одного сайта, но потом заметил, что он почему-то постоянно загружает изображение. Как это можно исправить, вот код:
<div class="header-logo">
                            <div class="contener_box">
                                <div class="box">
                                    <span></span>
                                </div>
                            </div>
                        </div>

Вот CSS:
.box {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    margin: 70px auto;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: transform 350ms;
    -webkit-animation: spin 4s infinite linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: transform 350ms;
    -moz-animation: spin 4s infinite linear;
    -ms-transform-style: preserve-3d;
    -ms-transition: transform 350ms;
    -ms-animation: spin 4s infinite linear;
    transform-style: preserve-3d;
    transition: transform 350ms;
    animation: spin 4s infinite linear;
}

.box:before, .box:after, .box span, .box span:before, .box span:after {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    -webkit-animation: lighting 2s infinite linear;
    -moz-animation: lighting 2s infinite linear;
    -ms-animation: lighting 2s infinite linear;
    animation: lighting 2s infinite linear;
}

.box:before {
    -webkit-transform: rotateY(90deg) translate3D(-50px,0,50px);
    -moz-transform: rotateY(90deg) translate3D(-50px,0,50px);
    -ms-transform: rotateY(90deg) translate3D(-50px,0,50px);
    transform: rotateY(90deg) translate3D(-50px,0,50px);
    text-transform: rotate(900deg);
    background-image: url("/img/carrot-cube1.png");

}

.box:after {
    -webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(50px,0,-50px);
    -moz-transform: rotateY(90deg) rotateZ(180deg) translate3D(50px,0,-50px);
    -ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(50px,0,-50px);
    transform: rotateY(90deg) rotateZ(180deg) translate3D(50px,0,-50px);
    background-image: url("/img/carrot-cube1.png");

}

.box span {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3D(0,0,100px);
    -webkit-animation-delay: 1s;
    -moz-transform-style: preserve-3d;
    -moz-transform: translate3D(0,0,100px);
    -moz-animation-delay: 1s;
    -ms-transform-style: preserve-3d;
    -ms-transform: translate3D(0,0,100px);
    -ms-animation-delay: 1s;
    transform-style: preserve-3d;
    transform: translate3D(0,0,100px);
    animation-delay: 1s;
    background-image: url("/img/carrot-cube1.png");


}

.box span:before {
    -webkit-transform: rotate(180deg) translate3D(0,0,-100px);
    -webkit-animation-delay: 1s;
    -moz-transform: rotate(180deg) translate3D(0,0,-100px);
    -moz-animation-delay: 1s;
    -ms-transform: rotate(180deg) translate3D(0,0,-100px);
    -ms-animation-delay: 1s;
    transform: rotate(180deg) translate3D(0,0,-100px);
    animation-delay: 1s;
    background-image: url("/img/carrot-cube1.png");

}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotateY(0deg) translateZ(-50px); }
  100% { -webkit-transform: rotateY(360deg) translateZ(-50px); }
}
@-webkit-keyframes lighting {
  0% { box-shadow: inset 100px 0 150px rgba(255,255,255,1), inset 0 0 150px rgba(255,255,0255,0.3); }
  100% { box-shadow: inset 0 0 150px rgba(255,255,255,1), inset -100px 0 150px rgba(255,255,0255,0.3); }
}

@-moz-keyframes spin {
  0% { -moz-transform: rotateY(0deg) translateZ(-50px); }
  100% { -moz-transform: rotateY(360deg) translateZ(-50px); }
}
@-moz-keyframes lighting {
  0% { box-shadow: inset 100px 0 150px rgba(255,255,255,1), inset 0 0 150px rgba(255,255,0255,0.3); }
  100% { box-shadow: inset 0 0 150px rgba(255,255,255,1), inset -100px 0 150px rgba(255,255,0255,0.3); }
}

@-ms-keyframes spin {
  0% { -ms-transform: rotateY(0deg) translateZ(-50px); }
  100% { -ms-transform: rotateY(360deg) translateZ(-50px); }
}
@-ms-keyframes lighting {
  0% { box-shadow: inset 100px 0 150px rgba(255,255,255,1), inset 0 0 150px rgba(255,255,0255,0.3); }
  100% { box-shadow: inset 0 0 150px rgba(255,255,255,1), inset -100px 0 150px rgba(255,255,0255,0.3); }
}

@keyframes spin {
  0% {transform: rotateY(0deg) translateZ(-50px); }
  100% {transform: rotateY(360deg) translateZ(-50px); }
}
@keyframes lighting {
  0% { box-shadow: inset 100px 0 150px rgba(0,0,0,0.2), inset 0 0 150px rgba(255,255,0255,0.3); }
  100% { box-shadow: inset 0 0 150px rgba(0,0,0,0.2), inset -100px 0 150px rgba(255,255,0255,0.3); }
}
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы