css实现多彩滑块组合成炫酷色彩氛围效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现多彩滑块组合成炫酷色彩氛围效果代码

代码标签: 滑块组 合成 炫酷 色彩 氛围 效果

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

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

<head>

  <meta charset="UTF-8">

  
<style>
body {
	display: grid;
	place-items: center;
	background-color: #030303;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.app {
	position: relative;
}
input {
	--absX: max(calc(var(--x) * -1), var(--x));
	accent-color: hsl(calc(var(--absX) * 2), 100%, 50%);
	mix-blend-mode: screen;
	width: 5rem;
	height: 1rem;
	margin-left: -2.5rem;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translateX(calc(var(--x) * 3px)) translateY(calc(var(--y) * 3px))
		rotate(calc(var(--rot) * 1deg));
}
</style>



</head>

<body >
  <div class="app">
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0; --y: 0; --rot: 0"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.24455151948660941; --y: 0.2265075394504598; --rot: 42.80635001174391"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.050998681531847445; --y: 0.6647131553733968; --rot: 85.61270002348782"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.6214083129159855; --y: 0.7834868911723467; --rot: 128.41905003523172"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.3177281402254124; --y: 0.20339696712550376; --rot: 171.22540004697564"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.381212620691272; --y: -0.9327537050159204; --rot: -145.96824994128048"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.45540683455563474; --y: -1.9474610689407932; --rot: -103.16189992953656"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.1541046353416087; --y: -2.027926757831125; --rot: -60.355549917792644"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.5425556879591067; --y: -0.8040657216533384; --rot: -17.549199906048734"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.7132057170027624; --y: 1.2800448184432938; --rot: 25.257150105698436"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.2452625952031096; --y: 3.091994854474879; --rot: 68.06350011743909"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.3062366459904384; --y: 3.426104240842081; --rot: 110.86985012917975"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -3.5852092300800336; --y: 1.773774161653319; --rot: 153.6762001409269"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.15526015381868; --y: -1.2294677026520608; --rot: -163.51744984732593"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.383310936408974; --y: -4.01218229373631; --rot: -120.71109983558529"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.0476875194487951; --y: -4.889003053956014; --rot: -77.90474982384463"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.363550806226478; --y: -3.066572811123959; --rot: -35.09839981209746"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 5.615466058916625; --y: 0.7600342441406841; --rot: 7.707950199649704"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.8153136837019663; --y: 4.630699892560144; --rot: 50.51430021139687"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.36685098644372466; --y: 6.3226996975071; --rot: 93.32065022313103"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.805851949452286; --y: 4.620414644205659; --rot: 136.12700023487818"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -6.998787019243336; --y: 0.13030832387448701; --rot: 178.93335024662537"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -5.4719651420660425; --y: -4.882148631677649; --rot: -138.26029974164052"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.7286836465055744; --y: -7.631958983189907; --rot: -95.45394972989337"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.853725223451066; --y: -6.359351496436952; --rot: -52.64759971814619"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 8.210709182887502; --y: -1.4243241058450518; --rot: -9.841249706399026"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.271352052637864; --y: 4.7157767586804; --rot: 32.96510030534813"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.212113747772741; --y: 8.723906966887878; --rot: 75.77145031708228"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.4646153165276585; --y: 8.196238233881306; --rot: 118.57780032882947"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.160908024203927; --y: 3.0858076117153703; --rot: 161.3841503405766"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.121880689272984; --y: -4.097717985741408; --rot: -155.80949964768925"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.038077870957232; --y: -9.511661520778759; --rot: -113.00314963594211"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.61376506222314; --y: -10.03585969674911; --rot: -70.19679962419492"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.766812896821598; --y: -5.060569714812679; --rot: -27.390449612447757"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 10.925578943498156; --y: 3.012668118766845; --rot: 15.415900399299412"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 6.143966569406656; --y: 9.917801465300892; --rot: 58.22225041103355"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.295587663304354; --y: 11.778381776801297; --rot: 101.02860042279376"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.956951988950944; --y: 7.278064179494227; --rot: 143.83495043451487"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -12.581668995347886; --y: -1.464940181695528; --rot: -173.35869955373798"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.451853003040366; --y: -9.877559456414199; --rot: -130.55234954199082"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.5243944426992713; --y: -13.323017235080195; --rot: -87.74599953024367"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 9.673966327471108; --y: -9.653608303258059; --rot: -44.93964951849649"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.990296994702298; --y: -0.5211429746469236; --rot: -2.1332995067493217"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 10.870987260252333; --y: 9.341631572261663; --rot: 40.673050504997846"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 1.6655528875074292; --y: 14.571789344141191; --rot: 83.47940051671897"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.877190889577752; --y: 12.091132366738764; --rot: 126.28575052846612"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.056300364628294; --y: 2.9015393227052857; --rot: 169.0921005402133"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -13.300780319817202; --y: -8.278507554409058; --rot: -148.10154944803955"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.22067572761745; --y: -15.433272381523658; --rot: -105.29519943629239"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.544713414223923; --y: -14.486375574138872; --rot: -62.48884942454522"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 15.692891070590841; --y: -5.613461287329598; --rot: -19.68249941279805"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 15.634187680959094; --y: 6.676239626956697; --rot: 23.123850598949115"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.0693869774670715; --y: 15.826187544928924; --rot: 65.93020061069628"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -5.674836810152686; --y: 16.73043150337872; --rot: 108.7365506224174"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.825134563073261; --y: 8.577010904774697; --rot: 151.54290063416457"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.76138937026612; --y: -4.543584350367978; --rot: -165.65074935408828"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.124042413278083; --y: -15.682736038669752; --rot: -122.84439934234112"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 3.286888703465229; --y: -18.713534210592947; --rot: -80.03804933059395"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 15.393109078221395; --y: -11.69743436330189; --rot: -37.23169931884679"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.573652696006732; --y: 1.910470600110405; --rot: 5.5746506929003825"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.28348292373255; --y: 14.951557825688456; --rot: 48.38100070462149"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -0.421341154974095; --y: 20.328967412920154; --rot: 91.18735071636867"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -14.354638450441703; --y: 14.867934156035657; --rot: 133.9937007281158"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -20.967257085933227; --y: 1.1722330367221983; --rot: 176.800050739863"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -16.4360966114791; --y: -13.600214678056968; --rot: -140.39359924838985"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -2.860775647155607; --y: -21.476973882302087; --rot: -97.58724923664268"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.687503331462077; --y: -17.972959111235376; --rot: -54.78089922489552"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.84735684226017; --y: -4.633656955874658; --rot: -11.974549213148348"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.46331283354873; --y: 11.617109421934321; --rot: 30.831800798598817"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 6.479160447048244; --y: 22.06854050229434; --rot: 73.63815081031993"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.3910504055665; --y: 20.891876792510068; --rot: 116.4445008220671"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.13165780780177; --y: 8.384559248373058; --rot: 159.25085083381427"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.243425760028288; --y: -9.01276930017129; --rot: -157.9427991544125"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.3362019182764; --y: -22.028936447675598; --rot: -115.13644914271748"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.487136439368194; --y: -23.50291965656032; --rot: -72.33009913097031"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.753787786299146; --y: -12.319607012752561; --rot: -29.523749119223133"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 24.655633416718768; --y: 5.820439725498292; --rot: 13.282600892524032"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 14.319565792578622; --y: 21.300887617416087; --rot: 56.0889509042712"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.020363327691556; --y: 25.68728632443203; --rot: 98.89530091601837"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -20.666248019745495; --y: 16.320252364188793; --rot: 141.70165092776554"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -26.584169807206504; --y: -2.0959548594187996; --rot: -175.49199906048733"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -18.305340485756357; --y: -19.847279654918186; --rot: -132.68564904874015"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.057581155948083516; --y: -27.33327268223823; --rot: -89.87929903699298"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 18.84284391452828; --y: -20.258126212884772; --rot: -47.07294902524581"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 27.922402857136046; --y: -2.0831271405751632; --rot: -4.266599013498643"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 22.16165550711833; --y: 17.65329439401013; --rot: 38.53975099824853"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.313341894980363; --y: 28.3403045056821; --rot: 81.34610100999569"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -16.280507246328927; --y: 23.998855885275685; --rot: 124.15245102174283"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.576769763946693; --y: 6.61911431407755; --rot: 166.95880103343794"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -25.75267114884978; --y: -14.727900047539404; --rot: -150.23484895481494"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -8.98546184266607; --y: -28.622744024184545; --rot: -107.42849894306777"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.000438888788777; --y: -27.406198200589216; --rot: -64.62214893132061"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 28.470423942874046; --y: -11.396464581503718; --rot: -21.81579891957343"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 28.94282493064215; --y: 11.104633493915923; --rot: 20.990551092173735"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 13.835370611186647; --y: 28.113347325227757; --rot: 63.79690110392091"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -9.048520249760422; --y: 30.346368136359473; --rot: 106.60325111566807"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -27.546474100575228; --y: 16.28470953460141; --rot: 149.40960112741524"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -31.601210429961945; --y: -6.841633124167712; --rot: -167.7840488608376"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -18.726413482314726; --y: -26.76625766147543; --rot: -124.97769884909044"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.494962536678156; --y: -32.69243508510585; --rot: -82.17134883734327"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.7707059034898; --y: -21.141944762650084; --rot: -39.3649988255961"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.60595777820879; --y: 2.02090233650531; --rot: 3.4413511861510613"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 23.512429280812498; --y: 24.559431371975844; --rot: 46.24770119789822"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 0.5668148681972511; --y: 34.32865419271441; --rot: 89.0540512096454"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -23.133689996547968; --y: 25.818794799939717; --rot: 131.86040122139255"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -34.84848247437296; --y: 3.253193697479579; --rot: 174.6667512330876"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.04191307177924; --y: -21.496407972478128; --rot: -142.5268987551652"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -6.022062883967713; --y: -35.154599553012254; --rot: -99.72054874341806"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 19.65219643097243; --y: -30.162744826001408; --rot: -56.91419873167089"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.23747038093965; --y: -8.856172551588644; --rot: -14.107848719923727"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 32.16248657599565; --y: 17.607353625498174; --rot: 28.698501291823447"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 11.737301303225307; --y: 35.088969180033; --rot: 71.50485130357062"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -15.369854450650442; --y: 34.0227181739437; --rot: 114.31120131531777"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -34.702471838266504; --y: 14.64637245505172; --rot: 157.11755132706494"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -35.72555003179635; --y: -12.949327199728012; --rot: -160.0760986611879"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -17.563578680799612; --y: -34.07293865177769; --rot: -117.26974864944074"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 10.357017559682696; --y: -37.25376891509818; --rot: -74.46339863769357"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.196986670160385; --y: -20.4685142602289; --rot: -31.657048625946395"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 38.590981215254786; --y: 7.605739934744262; --rot: 11.149301385800765"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 23.340314062008446; --y: 32.07295097011273; --rot: 53.95565139754794"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.709816282981142; --y: 39.72175261214648; --rot: 96.762001409243"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -30.700934255414023; --y: 26.157798332859052; --rot: 139.56835142099015"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.6317430531175; --y: -1.6850027427915772; --rot: -177.6252985672627"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.899622312337584; --y: -29.082844259188953; --rot: -134.81894855551553"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -1.451595583094744; --y: -41.307835996425474; --rot: -92.01259854376836"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 27.22241850619412; --y: -31.544429647478665; --rot: -49.206248532021185"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 41.73826089668896; --y: -4.681621227729245; --rot: -6.399898520274021"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 34.07100854164424; --y: 25.125236079812595; --rot: 36.40645149147315"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 7.985571799934868; --y: 41.9127079472626; --rot: 79.21280150322032"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -22.798716127135823; --y: 36.458449541282974; --rot: 122.01915151496749"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -41.82243413886714; --y: 11.342917635154492; --rot: 164.82550152671465"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.68630383953388; --y: -20.252102928166344; --rot: -152.3681484615382"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -14.732228948025213; --y: -41.460359745460096; --rot: -109.56179844979104"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 17.49643744930793; --y: -40.73474095936906; --rot: -66.75544843804386"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 40.82115440671581; --y: -18.131311701423513; --rot: -23.949098426296693"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 42.584704670392775; --y: 14.544515397063856; --rot: 18.85725158545047"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 21.517351335475368; --y: 39.901312041295434; --rot: 61.66360159719763"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -11.410831884347257; --y: 44.218065992890374; --rot: 104.4699516088927"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -38.69921389589663; --y: 24.867063434182203; --rot: 147.27630162063986"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -45.617772150193844; --y: -8.111512918733291; --rot: -169.917348367613"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -28.1568503470626; --y: -37.21517911163264; --rot: -127.1109983558658"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 4.664234017242289; --y: -46.767990346308444; --rot: -84.30464834411865"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 35.45150227032293; --y: -31.362962730292754; --rot: -41.49829833237149"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 47.654245269028365; --y: 1.088126348545114; --rot: 1.3080516794277945"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 34.461664923648314; --y: 33.412477470103696; --rot: 44.11440169117497"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 2.596329105310542; --y: 48.26354925083762; --rot: 86.92075170281791"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -31.10440856879586; --y: 37.42940304132385; --rot: 129.72710171456507"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -48.58452405905196; --y: 6.367418782787986; --rot: 172.53345172631225"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.24297462062279; --y: -28.535605328460935; --rot: -144.6601982619406"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -10.20232450389923; --y: -48.60751333379352; --rot: -101.85384825019344"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 25.716365288214067; --y: -42.87969865056352; --rot: -59.047498238446266"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 48.324684746678614; --y: -14.077261401940792; --rot: -16.241148226699103"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 45.31758478274688; --y: 22.658941294104174; --rot: 26.565201785048068"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 17.967624994489764; --y: 47.73012101448504; --rot: 69.37155179679523"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -19.377494711828742; --y: 47.53550052123318; --rot: 112.1779018085424"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -46.81989897002005; --y: 21.84814648617955; --rot: 154.9842518202896"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -49.51333518666967; --y: -15.888034450255287; --rot: -162.2093981679633"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -25.693055328089528; --y: -45.59215596662992; --rot: -119.40304815621612"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 12.208342024012008; --y: -51.23215945870835; --rot: -76.59669814446895"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 44.04714297276413; --y: -29.47624799625752; --rot: -33.79034813272178"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 52.67437931742514; --y: 8.357882983654351; --rot: 9.01600187902539"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: 33.17146189616231; --y: 42.187263798243215; --rot: 51.822351890772545"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -4.357705140819156; --y: 53.82388322952626; --rot: 94.62870190251972"/>
  <input checked="true" type="range" value="100" min="0" max="100" style="--x: -40.0170999838369; --y: 36.75245325137782; --rot: 137.4350519142669"/>
  <input checked.........完整代码请登录后点击上方下载按钮下载查看

网友评论0