CSS Eigenschaften ändern.

Hallo alle zusammen, ich habe eine wahrscheinlich recht einfache frage für euch aber ich verzweifle gerade dran. Ich möchte gerne folgende Zeile in der CSS Datei dynamisch anpassen:
background: rgb(30, 59, 63);
und
section:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(30, 59, 63);
  mix-blend-mode: hue;
  animation: animate 20s linear infinite
}
Kann mir einer sagen wie ich da dran komme? MFG Sven

Der hier verwendete Code

<style> div{ height:100px; position:absolute; top:0; font-size:60px; font-weight:900; padding-top:30px; text-align:center; width:100%; display:block; } section:before{ content: ''; position: absolute; top: 100px; left: 0; width: 100%; height: calc(100% - 100px); background: rgb(30, 59, 63); mix-blend-mode: hue; animation: animate 20s linear infinite } </style> <div></div> <section> hallo </section> <script> hea=document.getElementsByTagName('style')[0]; helper=hea.innerHTML; let para = document.querySelector('section'); let compStyles = window.getComputedStyle(para, ':before'); para.innerHTML='Start Color '+compStyles.backgroundColor; function weiter(r,g,b){ if(r<=0){var r=255;} if(g>=255){var g=0;} if(b>=255){var b=0;} document.getElementsByTagName('div')[0].innerHTML= compStyles.backgroundColor; hea.innerHTML=helper+'section:before{background:rgba('+r+','+g+','+b+')}'; setTimeout(function(){r--;},35) setTimeout(function(){g++;},55) setTimeout(function(){b++;weiter(r,g,b)},95) } weiter(255,122,0) </script>

Add Comment

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

Comments

No comments yet. Be the first!