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=&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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