hex farbe,wie Funktioniert es

Ich will ja mal eine Homepage bauen,wo ein Auto mit drehender Felge zu sehen ist. Der benutzer soll mit den Felgenfarben rumspielen dürfen. Deshalb wollte ich ein Script haben,wo ich von mir ausdenke ,das man da einfacher drauf zu greifen kann..

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <style> #hint{ position:absolute; left:200px; top:50px; background:red; width:200px; height:100px; display:none; } p{ font-size:30px; color:yellow; text-align:center; margin-top:12px; } #wrapper { position:absolute; top:100px; display:inline-block; background-color:blue; border-radius: 50%; animation:dreh 4s infinite linear; animation-play-state: paused; } #wahldiv{ padding-bottom:30px; position:absolute; left:100px; } #fahrdiv{ position:absolute; top:100px; width:0px; height:0px; display:inline-block; background-color:green; border-radius: 50%; animation-play-state: paused; } @keyframes fahr { from {left:0px; } to {left:350px; } } @keyframes jump { 0%{top:100px;left:0px; } 10%{top:0px;left:100px; } 20%{top:100px;left:100px; } 30%{top:0px;left:200px; } 40%{top:100px;left:200px; } 50%{top:0px;left:300px; } 60%{top:100px;left:300px; } 70%{top:0px;left:200px; } 80%{top:100px;left:200px; } 90%{top:0px;left:100px; } 100%{top:100px;left:0px; } } //#felge { animation:dreh 4s infinite linear; } @keyframes dreh { from {transform: rotate( 0deg); } to {transform: rotate(360deg); } } @keyframes dreh1 { from {transform: rotate( 0deg); } to {transform: rotate(-360deg); } } #felge { position: relative; // display: inline-block; width: 200px; height: 200px; border-radius:50%; border:10px solid red; } span { position: absolute; left:100px; transform-origin: bottom; z-index: -100; } .speiche{ box-shadow: black 0 0 0 5px; height: 100px; top: 0px; } .speiche1{ transform: rotate(45deg);} .speiche2{ transform: rotate(90deg);} .speiche3{ transform: rotate(135deg);} .speiche4{ transform: rotate(180deg);} .speiche5{ transform: rotate(225deg);} .speiche6{ transform: rotate(270deg);} .speiche7{ transform: rotate(315deg);} .speiche8{ transform: rotate(360deg);} .speiche9{ transform: rotate(22.5deg);} .speiche10{ transform: rotate(67.5deg);} .speiche11{ transform: rotate(112.5deg);} .speiche12{ transform: rotate(157.5deg);} .speiche13{ transform: rotate(202.5deg);} .speiche14{ transform: rotate(247.5deg);} .speiche15{ transform: rotate(292.5deg);} .speiche16{ transform: rotate(337.5deg);} b{ position:absolute; top:4px; left:4px; } span#mitte{ posision:absolute; background:red; height:40px; width:40px; border-radius:50%; border:3px solid black; top:77px; left:77px; text-align: center; font-size:26px; z-index:110; } </style> <div id="hint"></div> <div id="wahldiv"> <input type="color" id="color1" name="color1" value="#012548"> <input type="color" id="color2" name="color2" value="#645875"> <input type="color" id="color3" name="color3" value="#132548"> <select id="wahl" name="wahl"> <option value="4">4 speichen</option> <option value="5">5 speichen</option> <option value="7">7 speichen</option> <option value="8">8 Speichen</option> <option value="9">9 Speichen</option> <option value="12">12 Speichen</option> <option value="16">16 speichen </option> </select> <button id="play">Play</button> <button id="stopa">Stop</button> <button id="back">Back</button> <br> <input type="color" id="color4" name="color4" value="#c12548"> <input type="color" id="color5" name="color5" value="#c12548"> <select id="border" name="border"> <option value="solid">Solid </option> <option value="dotted">dotted</option> <option value="dashed">dashed</option> <option value="double">double</option></select>Emblem:<input type="text" id="text" name="text" size="2" value="Sk" ><button id="jump">JumpStart</button><button id="fahr">FahrStart</button></div> <div id="fahrdiv"><div id="wrapper"> <div id="felge"> <span class="speiche speiche1 acht zwolf"></span> <span class="speiche speiche2 acht vier"></span> <span class="speiche speiche3 acht zwolf"></span> <span class="speiche speiche4 acht vier"></span> <span class="speiche speiche5 acht zwolf"></span> <span class="speiche speiche6 acht vier funf"></span> <span class="speiche speiche7 acht zwolf funf"></span> <span class="speiche speiche8 acht vier funf"></span> <span class="speiche speiche9 vier funf"></span> <span class="speiche speiche10 vier funf neun"></span> <span class="speiche speiche11 vier funf neun"></span> <span class="speiche speiche12 vier funf neun"></span> <span class="speiche speiche13 vier funf neun"></span> <span class="speiche speiche14 vier funf neun"></span> <span class="speiche speiche15 vier funf neun"></span> <span class="speiche speiche16 vier funf neun"></span> <span id="mitte"> </span> </div> </div> </div> <script> function auswahl(){ $(".speiche").css("display","block"); var was=document.getElementsByName("wahl")[0].value; var color1=document.getElementsByName("color1")[0].value; var color2=document.getElementsByName("color2")[0].value; var color3=document.getElementsByName("color3")[0].value; var color4=document.getElementsByName("color4")[0].value; var color5=document.getElementsByName("color5")[0].value; var border=document.getElementsByName("border")[0].value; $("span#mitte").css("background-color",color4); $("span#mitte").css("border-color",color5); $("span#mitte").css("border-style",border); $("#felge").css("border-color", color1); $("#wrapper").css("background-color", color2); $(".speiche").css("box-shadow", color3+" 0 0 0 5px"); if(was==8){$(".acht").css("display","none");} if(was==12){$(".zwolf").css("display","none");} if(was==4){$(".vier").css("display","none");} if(was==5){$(".funf").css("display","none"); $(".speiche1").css("transform","rotate(72deg)"); $(".speiche2").css("transform","rotate(144deg)"); $(".speiche3").css("transform","rotate(216deg)"); $(".speiche4").css("transform","rotate(288deg)"); $(".speiche5").css("transform","rotate(360deg)"); } if(was==9){$(".neun").css("display","none"); $(".speiche1").css("transform","rotate(40deg)"); $(".speiche2").css("transform","rotate(80deg)"); $(".speiche3").css("transform","rotate(120deg)"); $(".speiche4").css("transform","rotate(160deg)"); $(".speiche5").css("transform","rotate(200deg)"); $(".speiche6").css("transform","rotate(240deg)"); $(".speiche7").css("transform","rotate(280deg)"); $(".speiche8").css("transform","rotate(320deg)"); $(".speiche9").css("transform","rotate(360deg)"); } } function stoppen(){ $("#wrapper").css("animation-play-state","paused"); } function run(){ $("#wrapper").css("animation","dreh 4s infinite linear"); } function runback(){ $("#wrapper").css("animation","dreh1 4s infinite linear"); } s=true; l=true; function fahrlos(){ if(l==true){ $("#fahrdiv").css("animation-play-state","running"); $("#fahrdiv").css("animation","fahr 4s infinite alternate-reverse forwards linear"); document.getElementById("fahr").innerHTML="FahrStop"; return l=false; } if(l==false){ $("#fahrdiv").css("animation-play-state","paused"); document.getElementById("fahr").innerHTML="Fahrstart"; return l=true; } } function jumpen(){ if(s==true){ document.getElementById("jump").innerHTML="JumpStop"; $("#fahrdiv").css("animation-play-state","paused"); $("#fahrdiv").css("animation","jump 4s infinite linear"); return s=false; } if(s==false){ $("#fahrdiv").css("animation-play-state","paused"); document.getElementById("jump").innerHTML="JumpStart"; return s=true; } } wahl.onchange=auswahl color1.onchange=auswahl color2.onchange=auswahl color3.onchange=auswahl color4.onchange=auswahl color5.onchange=auswahl play.onclick=run back.onclick=runback fahr.onclick=fahrlos stopa.onclick=stoppen border.onchange=auswahl jump.onclick=jumpen function texten(){ var text=document.getElementsByName("text")[0].value; $("span#mitte").html("<b>"+text+"</b>"); } text.onchange=texten </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!