FANDOM


Marquee

this text moves from the right to the left side of the screen, and pauses when you hover over it
  • code needed in css:
.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
 
.marquee span {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 15s linear infinite;
}
 
.marquee span:hover {
    animation-play-state: paused
}
 
/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
  • code needed on page:
<div class="marquee"><span>this text moves from the right to the left side of the screen, and pauses when you hover over it</span></div>

Grow

this text will enlarge when you hover over it
  • code needed in css:
.grow {
    transition:1s;
}
 
.grow:hover {
    font-size:200%;
    transition:1s;
}
  • code needed on page:
<div class="grow"><span>this text will enlarge when you hover over it</span></div>

Shrink

this text will shrink when you hover over it
  • code needed in css:
.shrink {
    transition:1s;
}
 
.shrink:hover {
    font-size:50%;
    transition:1s;
}
  • code needed on page:
<div class="shrink"><span>this text will shrink when you hover over it</span></div>

Rainbow

this text is rainbow colored
  • code needed in css:
.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
  • code needed on page:
<div><span class="rainbow">this text is rainbow colored</span></div>

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.