knockout实现角度三角形旋转动画效果代码
代码语言：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-left: 150px solid #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(17) {
top: 142.4478687999vh;
left: 21vw;
scale: -0.234492931;
animation-duration: 20s, 1.1868823741s, 1.6s, 30s;
animation-delay: 1.1367089739s, 1.2779542772s, 0.8084321223s, 7.9328365531s;
animation-direction: alternate, alternate, alternate, reverse;
border-radius: 50%;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(18) {
top: -70.3491789408vh;
left: 50vw;
scale: -0.2582096632;
animation-duration: 20s, 0.7549280665s, 1.6s, 30s;
animation-delay: 1.1454664559s, 0.759811571s, 0.9759579442s, 9.5019939707s;
animation-direction: alternate, alternate, alternate, reverse;
border-radius: 50%;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(19) {
top: 78.5806727539vh;
left: 91vw;
scale: 0.0017161298;
animation-duration: 20s, 0.6296267032s, 1.6s, 30s;
animation-delay: 1.4398439952s, 1.2537420522s, 0.5922782607s, 3.6661159098s;
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(20) {
top: 147.3020901121vh;
left: 52vw;
scale: 0.1016342395;
animation-duration: 20s, 0.7310254415s, 1.6s, 30s;
animation-delay: 0.9925422025s, 1.2289911905s, 1.0384818676s, 9.7238078984s;
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(21) {
top: -77.6514538481vh;
left: 89vw;
scale: 0.2634197705;
animation-duration: 20s, 0.5704172619s, 1.6s, 30s;
animation-delay: 0.8264177042s, 0.8377511199s, 0.8826334942s, 5.1589723266s;
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(22) {
top: -98.9926543436vh;
left: 34vw;
scale: 0.2356428993;
animation-duration: 20s, 0.5158745371s, 1.6s, 30s;
animation-delay: 1.3333260574s, 1.0934800552s, 1.4930703326s, 9.6184157167s;
animation-direction: alternate, alternate, alternate, forward;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(23) {
top: 91.7421640823vh;
left: 66vw;
scale: 0.4307488077;
animation-duration: 20s, 1.2697999648s, 1.6s, 30s;
animation-delay: 1.4191375983s, 0.6615832772s, 0.7215905165s, 3.4143993346s;
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(24) {
top: 115.7820980851vh;
left: 25vw;
scale: -0.253456269;
animation-duration: 20s, 0.3644788825s, 1.6s, 30s;
animation-delay: 1.035045665s, 0.5312421771s, 1.3791763103s, 7.2163602129s;
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(25) {
top: -99.8747999831vh;
left: 17vw;
scale: 0.2530038254;
animation-duration: 20s, 0.388751435s, 1.6s, 30s;
animation-delay: 1.4095471806s, 0.7790258261s, 0.6083905343s, 4.9455899909s;
animation-direction: alternate, alternate, alternate, forward;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(26) {
top: -23.6143107241vh;
left: 88vw;
scale: 0.4248212933;
animation-duration: 20s, 0.5381048429s, 1.6s, 30s;
animation-delay: 1.0947012566s, 1.4893744767s, 1.1566518309s, 9.2894829566s;
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(27) {
top: 15.5273663002vh;
left: 11vw;
scale: 0.3075369259;
animation-duration: 20s, 0.5108462904s, 1.6s, 30s;
animation-delay: 1.0796379525s, 0.8195250107s, 1.3688300977s, 5.036945799s;
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(28) {
top: -6.9002723788vh;
left: 35vw;
scale: -0.1103442363;
animation-duration: 20s, 0.5826996388s, 1.6s, 30s;
animation-delay: 1.1734697186s, 0.8264322618s, 1.4429607459s, 7.0574658158s;
animation-direction: alternate, alternate, alternate, reverse;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(29) {
top: 6.450119732vh;
left: 39vw;
scale: -0.1446159613;
animation-duration: 20s, 1.1758858262s, 1.6s, 30s;
animation-delay: 0.6845480697s, 1.213249746s, 0.6879267291s, 0.7094787537s;
animation-direction: alternate, alternate, alternate, reverse;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(30) {
top: 39.2130915235vh;
left: 16vw;
scale: -0.4795844155;
animation-duration: 20s, 0.6580883109s, 1.6s, 30s;
animation-delay: 1.0241450254s, 0.6236317446s, 1.322014844s, 5.4431236985s;
animation-direction: alternate, alternate, alternate, forward;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(31) {
top: 176.3230513438vh;
left: 88vw;
scale: -0.3213982404;
animation-duration: 20s, 1.0056913942s, 1.6s, 30s;
animation-delay: 1.3887346412s, 1.1681383866s, 1.1325911179s, 9.5097688714s;
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(32) {
top: 180.5821787617vh;
left: 15vw;
scale: -0.3714979981;
animation-duration: 20s, 1.1684772081s, 1.6s, 30s;
animation-delay: 1.1888656249s, 1.1917209778s, 0.5578885151s, 1.6762781527s;
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(33) {
top: 153.4377111503vh;
left: 96vw;
scale: 0.2124925355;
animation-duration: 20s, 1.2462016451s, 1.6s, 30s;
animation-delay: 1.0335661411s, 1.0794227203s, 1.4565670379s, 10.0014745907s;
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(34) {
top: 51.7597583935vh;
left: 62vw;
scale: 0.1333536798;
animation-duration: 20s, 0.5615846978s, 1.6s, 30s;
animation-delay: 0.6719517946s, 0.6642486728s, 0.9062725818s, 3.5213654755s;
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(35) {
top: 150.0034275705vh;
left: 72vw;
scale: 0.4448103393;
animation-duration: 20s, 0.8906089328s, 1.6s, 30s;
animation-delay: 0.6842753544s, 1.2086056408s, 0.913625473s, 7.3333881461s;
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(36) {
top: -9.1019374626vh;
left: 32vw;
scale: -0.0049778957;
animation-duration: 20s, 1.2322195955s, 1.6s, 30s;
animation-delay: 1.2240979479s, 1.3857589116s, 1.053102593s, 9.561766307s;
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(37) {
top: -88.6808238303vh;
left: 45vw;
scale: 0.4395422392;
animation-duration: 20s, 0.7727200251s, 1.6s, 30s;
animation-delay: 1.1224607123s, 1.1978109679s, 1.2241287923s, 4.1046294473s;
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(38) {
top: 184.1583223555vh;
left: 76vw;
scale: -0.3039668784;
animation-duration: 20s, 0.5952031759s, 1.6s, 30s;
animation-delay: 0.5704012608s, 0.8528252822s, 0.9957082526s, 9.8611667076s;
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(39) {
top: 129.2162260753vh;
left: 72vw;
scale: -0.0126692016;
animation-duration: 20s, 0.6368874323s, 1.6s, 30s;
animation-delay: 1.2574631073s, 0.7133521283s, 1.2901195573s, 3.1472088654s;
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(40) {
top: -15.6218494203vh;
left: 99vw;
scale: 0.3402931;
animation-duration: 20s, 0.3415337266s, 1.6s, 30s;
animation-delay: 1.4123615976s, 1.0357672674s, 1.1335818481s, 4.9333104528s;
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(41) {
top: -42.5181865241vh;
left: 97vw;
scale: 0.372280371;
animation-duration: 20s, 0.3323469797s, 1.6s, 30s;
animation-delay: 0.9190591889s, 0.9409010318s, 0.9925209757s, 9.2393365122s;
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(42) {
top: 191.5888391419vh;
left: 21vw;
scale: -0.1982520154;
animation-duration: 20s, 0.6247156339s, 1.6s, 30s;
animation-delay: 1.3085011463s, 1.0781763746s, 0.6986547001s, 1.2693930967s;
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(43) {
top: -4.8332249281vh;
left: 60vw;
scale: 0.3748781791;
animation-duration: 20s, 0.6834136898s, 1.6s, 30s;
animation-delay: 0.6246750792s, 0.511693776s, 1.3078475985s, 4.9555172242s;
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(44) {
top: -65.1388541959vh;
left: 25vw;
scale: 0.1737430765;
animation-duration: 20s, 1.2121882299s, 1.6s, 30s;
animation-delay: 0.5083206557s, 0.5290473789s, 1.0280264031s, 9.0860280486s;
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(45) {
top: -46.9710834369vh;
left: 76vw;
scale: 0.4777011977;
animation-duration: 20s, 1.1124859279s, 1.6s, 30s;
animation-delay: 1.0057361476s, 1.3732245485s, 0.9738108105s, 7.2233860999s;
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(46) {
top: 153.2478573178vh;
left: 54vw;
scale: -0.0003655988;
animation-duration: 20s, 1.0208981874s, 1.6s, 30s;
animation-delay: 1.1660795892s, 1.2099332028s, 0.7634479237s, 8.9303559415s;
animation-direction: alternate, alternate, alternate, forward;
border: 100px solid transparent;
border-right-width: 0px;
border-left-color: #f0f0f0;
rotate: -90deg;
}
.triangle:nth-of-type(47) {
top: 75.3445765633vh;
left: 75vw;
scale: 0.2205935199;
animation-duration: 20s, 1.2273642193s, 1.6s, 30s;
animation-delay: 0.7330225191s, 1.2935795645s, 0.7280627242s, 5.1037131761s;
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(48) {
top: 52.5789251493vh;
left: 33vw;
scale: 0.1835978611;
animation-duration: 20s, 0.6539541549s, 1.6s, 30s;
animation-delay: 1.0949063982s, 0.9087042015s, 1.0515792956s, 7.828023134s;
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(49) {
top: 120.2857916073vh;
left: 45vw;
scale: 0.2798718278;
animation-duration: 20s, 1.0310535971s, 1.6s, 30s;
animation-delay: 1.0332104023s, 1.0104210744s, 1.4450650195s, 4.8845749064s;
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(50) {
top: -18.3534838538vh;
left: 54vw;
scale: 0.4161163753;
animation-duration: 20s, 0.7020342846s, 1.6s, 30s;
animation-delay: 1.0181596238s, 0.8917124839s, 0.7521926912s, 1.0064632383s;
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(51) {
top: 87.6212376353vh;
left: 25vw;
scale: -0.1600283434;
animation-duration: 20s, 1.0822688383s, 1.6s, 30s;
animation-delay: 0.7909470996s, 1.2440966087s, 0.9616591344s, 4.4355870177s;
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(52) {
top: 69.2929024287vh;
left: 62vw;
scale: 0.4230335946;
animation-duration: 20s, 0.4663892695s, 1.6s, 30s;
animation-delay: 0.870865751s, 1.4270340683s, 1.3312966113s, 1.7735916349s;
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(53) {
top: 76.5521747277vh;
left: 94vw;
scale: 0.0704942.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0