Question

我有一个svg背景，以3分钟的页面加载分开，然后被移动以形成背景。你可以从一开始就看到一个大三角形，质量相当差，非常不稳定，这可能是什么原因？

以下是 Codepen 链接。

CSS

html,
body,
.avatar {
  /* position: absolute; */
  width: 100%;
  /* height: 100%; */
  display: block;
}
body {

  background: -webkit-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* W3C */

}
.avatar {
  z-index: 800;
}
.avatar path {
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all 3s ease;
          transition: all 3s ease;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
}
.avatar path:nth-of-type(4n+1) {
  -webkit-animation: p1 3s ease 1;
          animation: p1 3s ease 1;
}
.avatar path:nth-of-type(4n+2) {
  -webkit-animation: p2 3s ease 1;
          animation: p2 3s ease 1;
}
.avatar path:nth-of-type(4n+3) {
  -webkit-animation: p3 3s ease 1;
          animation: p3 3s ease 1;
}
.avatar path:nth-of-type(4n+4) {
  -webkit-animation: p4 3s ease 1;
          animation: p4 3s ease 1;
}
.hover {
  position: absolute;
  width: 40%;
  height: 40vw;
  top: 50%;
  left: 30%;
  margin-top: -20vw;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  visibility: hidden;
  -webkit-animation: waitforit 0 ease-in 3s 1 forwards;
          animation: waitforit 0 ease-in 3s 1 forwards;
}
.hover:hover + .avatar path:nth-of-type(4n+1) {
  -webkit-transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
          transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+2) {
  -webkit-transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
          transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+3) {
  -webkit-transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
          transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+4) {
  -webkit-transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
          transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
}
p {
  position: absolute;
  bottom: 0.5em;
  font-family: sans-serif;
  font-weight: 100;
  letter-spacing: 0.1em;
  color: #fff;
  border-left: 20px solid #fff;
  padding: 2px 0 0 4px;
  left: -50%;
  -webkit-animation: infromleft 0.5s ease-in 1 forwards;
          animation: infromleft 0.5s ease-in 1 forwards;
}
@-webkit-keyframes p1 {
  0% {
    -webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
            transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p1 {
  0% {
    -webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
            transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes p2 {
  0% {
    -webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
            transform: translate(400%, -900%) rotate(850deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p2 {
  0% {
    -webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
            transform: translate(400%, -900%) rotate(850deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes p3 {
  0% {
    -webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
            transform: translate(500%, 900%) rotate(325deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p3 {
  0% {
    -webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
            transform: translate(500%, 900%) rotate(325deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes p4 {
  0% {
    -webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
            transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes p4 {
  0% {
    -webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
            transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes waitforit {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@keyframes waitforit {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@-webkit-keyframes infromleft {
  0% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}
@keyframes infromleft {
  0% {
    left: -50%;
  }
  100% {
    left: 0;
  }
}

感谢大家的帮助。

Answer 1

好吧，所以@Sirko指出它使用PNG作为来源，所以这部分归功于他。

我之前在AI中更改了三角形的颜色，然后点击渐变网格工具并为我的三角形添加了额外的点，这反过来导致该单个三角形被视为.png。

感谢大家的帮助，感谢它！

内联WebSVG没有清晰的线条？

1 个答案: