Ecosphere 15°C Banner
by vovkasolovev
HTML
<div class="runtext-container"><marquee class="runtext-holder" direction="" onmouseover="this.stop();" onmouseout="this.start();">
<div class="runtext-item"><a href="http://ecosphere.press/15celsius">1,5°C <span class="runcolor1">Международный конкурс карикатуры</span> · <span class="runcolor2">International Cartoon Contest</span> · <span class="runcolor1">Экология и глобальное потепление</span> · <span class="runcolor2">Ecology and global warming</span></a></div>
</marquee></div>CSS
body{padding:0;margin:0}
.runtext-container {background-color:#161616;width: 100%;overflow-x: hidden;overflow-y: visible;padding: 10px 0;background: linear-gradient(-45deg, #161616, #111a51, #352436, #041718);background-size: 400% 400%;animation: runtext-bg-ani 15s ease infinite;}
@keyframes runtext-bg-ani {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.runtext-container .runtext-holder {width: 100%; position: relative; overflow: visible; display:inline; float:left; }
.runtext-container .runtext-item {color:#fff; display:inline; font-size:1.1em; }
.runtext-container .runtext-item a{ color:#fff; font-weight: bold; text-decoration: none;}
.runtext-container .runtext-item .runcolor1{ text-decoration: none; background: -webkit-linear-gradient(#f04436, #fecf2b, #adee3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.runtext-container .runtext-item .runcolor2{ text-decoration: none; background: -webkit-linear-gradient(#adee3c, #f04436); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}