knockout实现角度三角形旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：knockout实现角度三角形旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@1000&display=swap");
* {
  margin: auto;
  box-sizing: border-box;
}

body {
  position: relative;
  height: 100vh;
  background: #000;
  overflow: hidden;
}
body:before {
  content: "";
  position: fixed;
  top: -50vh;
  width: 100%;
  height: 200%;
  background-image: url(//repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png);
  background-size: cover;
  background-position: center;
  filter: brightness(0.32);
  animation: bob 20s ease infinite alternate;
}

.triangle {
  position: absolute;
  translate: 0px 50vh;
  animation: bob 20s cubic-bezier(1, -0.48, 0, 1.35) infinite alternate, blink 0.8s ease infinite alternate, pulse 1.6s ease infinite alternate, spin 30s ease infinite;
}
.triangle:nth-of-type(1) {
  top: 162.9338139041vh;
  left: 77vw;
  scale: 0.2667121704;
  animation-duration: 20s, 1.165498883s, 1.6s, 30s;
  animation-delay: 1.0803049145s, 0.7685655291s, 1.48549225s, 6.1528319803s;
  animation-direction: alternate, alternate, alternate, forward;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(2) {
  top: 104.5671401583vh;
  left: 58vw;
  scale: -0.2835965116;
  animation-duration: 20s, 1.118546588s, 1.6s, 30s;
  animation-delay: 1.2208141841s, 1.4173414093s, 1.0827011799s, 6.2107662308s;
  animation-direction: alternate, alternate, alternate, forward;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left-color: #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(3) {
  top: -93.1902892487vh;
  left: 52vw;
  scale: 0.2272117414;
  animation-duration: 20s, 1.0586222872s, 1.6s, 30s;
  animation-delay: 0.5257763273s, 0.848241375s, 0.8742362263s, 0.6307773855s;
  animation-direction: alternate, alternate, alternate, reverse;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(4) {
  top: -31.0762384199vh;
  left: 51vw;
  scale: -0.2042549922;
  animation-duration: 20s, 0.8265469099s, 1.6s, 30s;
  animation-delay: 0.6303362552s, 1.1094040593s, 1.0623421905s, 0.9947067768s;
  animation-direction: alternate, alternate, alternate, forward;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(5) {
  top: 116.1860806442vh;
  left: 82vw;
  scale: -0.2064776182;
  animation-duration: 20s, 0.4728298258s, 1.6s, 30s;
  animation-delay: 0.7780513613s, 0.7352637839s, 1.3276625466s, 2.4007991229s;
  animation-direction: alternate, alternate, alternate, reverse;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(6) {
  top: 71.7375386345vh;
  left: 1vw;
  scale: 0.0510984807;
  animation-duration: 20s, 0.4928407832s, 1.6s, 30s;
  animation-delay: 0.5597677589s, 1.3376516214s, 1.082765257s, 1.472524116s;
  animation-direction: alternate, alternate, alternate, reverse;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left-color: #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(7) {
  top: -66.0982753901vh;
  left: 4vw;
  scale: 0.3123404804;
  animation-duration: 20s, 0.9906753137s, 1.6s, 30s;
  animation-delay: 0.9355049057s, 1.2052485444s, 1.0537169381s, 7.9654203948s;
  animation-direction: alternate, alternate, alternate, reverse;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(8) {
  top: -72.8082454866vh;
  left: 58vw;
  scale: -0.2935728172;
  animation-duration: 20s, 1.0037683821s, 1.6s, 30s;
  animation-delay: 1.0375149206s, 1.4965852785s, 0.5286047989s, 5.2692066543s;
  animation-direction: alternate, alternate, alternate, reverse;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(9) {
  top: 2.8600086146vh;
  left: 84vw;
  scale: 0.1910298276;
  animation-duration: 20s, 0.516452843s, 1.6s, 30s;
  animation-delay: 0.8571510478s, 1.2871966783s, 1.0700904145s, 1.1604925199s;
  animation-direction: alternate, alternate, alternate, forward;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left-color: #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(10) {
  top: 26.3644442606vh;
  left: 48vw;
  scale: 0.431989431;
  animation-duration: 20s, 0.5575409216s, 1.6s, 30s;
  animation-delay: 1.4896735763s, 1.2890026023s, 0.9794806606s, 1.1813188s;
  animation-direction: alternate, alternate, alternate, reverse;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(11) {
  top: 103.3964879303vh;
  left: 87vw;
  scale: 0.0570195911;
  animation-duration: 20s, 1.0830283176s, 1.6s, 30s;
  animation-delay: 1.0882623417s, 1.1388224375s, 0.5006195555s, 5.0782170751s;
  animation-direction: alternate, alternate, alternate, reverse;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(12) {
  top: -76.0668869075vh;
  left: 19vw;
  scale: -0.2296024109;
  animation-duration: 20s, 1.219065549s, 1.6s, 30s;
  animation-delay: 0.9913188425s, 1.368130054s, 1.4656466641s, 2.4877852309s;
  animation-direction: alternate, alternate, alternate, forward;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(13) {
  top: 157.3788013973vh;
  left: 78vw;
  scale: -0.1469199333;
  animation-duration: 20s, 0.4058645864s, 1.6s, 30s;
  animation-delay: 0.7667139744s, 0.8208647904s, 0.5558799618s, 4.4338245656s;
  animation-direction: alternate, alternate, alternate, forward;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(14) {
  top: 79.5742018135vh;
  left: 2vw;
  scale: -0.2897130382;
  animation-duration: 20s, 0.413494059s, 1.6s, 30s;
  animation-delay: 0.7191100042s, 1.0077000089s, 0.7987887811s, 9.0805822451s;
  animation-direction: alternate, alternate, alternate, forward;
  border-radius: 50%;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left: 150px solid #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(15) {
  top: -4.7396155423vh;
  left: 63vw;
  scale: 0.418700951;
  animation-duration: 20s, 0.5330249918s, 1.6s, 30s;
  animation-delay: 0.6801584966s, 0.6428673038s, 1.4071988923s, 8.964253042s;
  animation-direction: alternate, alternate, alternate, forward;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-left-color: #f0f0f0;
  rotate: -90deg;
}
.triangle:nth-of-type(16) {
  top: 12.3348851468vh;
  left: 48vw;
  scale: 0.1000733075;
  animation-duration: 20s, 0.7556281065s, 1.6s, 30s;
  animation-delay: 1.0893544574s, 0.6155773402s, 0.8810033699s, 0.8647845485s;
  animation-direction: alternate, alternate, alternate, reverse;
  border: 100px solid transparent;
  border-right-width: 0px;
  border-.........完整代码请登录后点击上方下载按钮下载查看