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:
<div class="prehelp"><pre class="html_code">
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
}</pre></div>
Kann mir einer sagen wie ich da dran komme?
MFG Sven
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>