4
У меня есть элемент с клипсой (шестиугольник) на нем псевдо (:before и :after).Как удалить странную границу из css-анимированного клипа?
.cssload-cssload-spinner {
position: relative;
border: none;
}
.cssload-cssload-spinner:before,
.cssload-cssload-spinner:after {
display: block;
content: ' ';
width: 88px;
height: 88px;
border: none;
outline: none;
clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
}
Псевдоэлементы, анимированные css-анимацией. И после добавления анимации, я вижу рамку созвездия.
Это не может быть удалена с border: none или outline: none (у меня нет никаких идей больше).
Как я могу удалить эти границы?
Пример:
.cssload-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-flex;
display: -moz-flex;
box-pack: center;
-o-box-pack: center;
-ms-box-pack: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
box-align: center;
-o-box-align: center;
-ms-box-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
perspective: 390px;
-o-perspective: 390px;
-ms-perspective: 390px;
-webkit-perspective: 390px;
-moz-perspective: 390px;
height: 100vh;
overflow: hidden;
}
.cssload-cssload-spinner {
position: relative;
border: none;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
animation: cssload-wobble 4.59s ease-in-out infinite;
-o-animation: cssload-wobble 4.59s ease-in-out infinite;
-ms-animation: cssload-wobble 4.59s ease-in-out infinite;
-webkit-animation: cssload-wobble 4.59s ease-in-out infinite;
-moz-animation: cssload-wobble 4.59s ease-in-out infinite;
}
.cssload-cssload-spinner:before,
.cssload-cssload-spinner:after {
display: block;
content: ' ';
border: none;
width: 88px;
height: 88px;
outline: none;
-webkit-clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
animation: cssload-spin 1.73s ease-in-out infinite both reverse;
-o-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
-ms-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
-webkit-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
-moz-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
}
.cssload-cssload-spinner:before {
background-color: #02baff;
position: absolute;
}
.cssload-cssload-spinner:after {
background-color: #4c4c4c;
animation-delay: -0.86s;
-o-animation-delay: -0.86s;
-ms-animation-delay: -0.86s;
-webkit-animation-delay: -0.86s;
-moz-animation-delay: -0.86s;
}
@keyframes cssload-wobble {
0%,
100% {
-webkit-transform: rotateX(8.75deg) rotateY(35deg);
transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
-webkit-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@-webkit-keyframes cssload-wobble {
0%,
100% {
-webkit-transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
-webkit-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@keyframes cssload-spin {
0%,
100% {
-webkit-transform: translateZ(49px) rotateX(14deg);
transform: translateZ(49px) rotateX(14deg);
}
33% {
-webkit-transform: translateZ(-49px) scale(0.4);
transform: translateZ(-49px) scale(0.4);
}
66% {
-webkit-transform: translateZ(-49px);
transform: translateZ(-49px);
}
}
@-webkit-keyframes cssload-spin {
0%,
100% {
-webkit-transform: translateZ(49px) rotateX(14deg);
}
33% {
-webkit-transform: translateZ(-49px) scale(0.4);
}
66% {
-webkit-transform: translateZ(-49px);
}
}<div class="cssload-wrap">
<div class="cssload-cssload-spinner"></div>
</div>Работает только в хроме http://codepen.io/sattellite/pen/RrZpBB
Update: пример уже не это странные границы. Решаемые Joseph Marikle
не знаю, чем это вызвано, но добавив радиус границы фиксирует это для моей версии хром на макинтош: http://codepen.io/ anon/pen/bErxGj –
Также исправлена его здесь, в хромированном виде с окнами, поэтому кажется, что не является специфическим – seahorsepip
Это довольно аккуратная анимация! –