Inspiriert von einem der großartigen Codrops-Artikel.

Die korrekte Interpretation von Pseudo-Elementen wie ::before und ::after ist für moderne Browser längst kein Problem mehr. Auch CSS3-Spezifikationen wie transform und transition beherrschen die gängigsten Browser inzwischen problemlos. 

Damit ergeben sich interessante Möglichkeiten für ein in letzter Zeit wieder zunehmend "bewegtes" Webdesign. Und das Ganze ohne zusätzlichen JavaScript-Code.

Bei den folgenden drei Beispielen werden ein HTML-Element und die Pseudo-Elemente ::before und ::after beim Überfahren mit der Maus mittels CSS transformiert und generieren dadurch ein farbiges Blendenspiel in unterschiedlicher Ausführung.

Der zugrundeliegende Code ist unten aufgeführt.

Beispiel 1

Beispiel 2

Beispiel 3

Der Html-Code:

<div class="rainbow-shutter">
    <a href="#">Caption...</a>
</div>
<div class="rainbow-shutter rainbow-shutter-square">
    <a href="#">Caption...</a>
</div>
<div class="rainbow-shutter rainbow-shutter-lily">
    <a href="#">Caption...</a>
</div>

Der CSS-Code:

.rainbow-shutter {
    background: #ffffff;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    width: 16rem;
    height: 16rem;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out
}
.rainbow-shutter .shutter-content,
.rainbow-shutter>a {
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    opacity: 0;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .8s ease-in-out;
    -o-transition: opacity .8s ease-in-out;
    transition: opacity .8s ease-in-out
}
.rainbow-shutter .shutter-content .rainbow-shutter .icons,
.rainbow-shutter>a .rainbow-shutter .icons {
    display: block;
    font-size: 2.25rem
}
.rainbow-shutter::before,
.rainbow-shutter::after {
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    -webkit-box-shadow: inset 6rem 0 0 rgba(47, 164, 231, 0.2), inset 0 6rem 0 rgba(47, 164, 231, 0.2), inset -6rem 0 0 rgba(47, 164, 231, 0.2), inset 0 -6rem 0 rgba(47, 164, 231, 0.2);
    box-shadow: inset 6rem 0 0 rgba(47, 164, 231, 0.2), inset 0 6rem 0 rgba(47, 164, 231, 0.2), inset -6rem 0 0 rgba(47, 164, 231, 0.2), inset 0 -6rem 0 rgba(47, 164, 231, 0.2);
    -webkit-transition: all 0.75s;
    -o-transition: all 0.75s;
    transition: all 0.75s
}
.rainbow-shutter::after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}
.rainbow-shutter:hover::before,
.rainbow-shutter:hover::after {
    border-radius: 33.3333%;
    -webkit-box-shadow: inset 1rem 0 0 rgba(3, 60, 115, 0.5), inset 0 1rem 0 rgba(115, 168, 57, 0.5), inset -1rem 0 0 rgba(221, 86, 0, 0.5), inset 0 -1rem 0 rgba(199, 28, 34, 0.5);
    box-shadow: inset 1rem 0 0 rgba(3, 60, 115, 0.5), inset 0 1rem 0 rgba(115, 168, 57, 0.5), inset -1rem 0 0 rgba(221, 86, 0, 0.5), inset 0 -1rem 0 rgba(199, 28, 34, 0.5)
}
.rainbow-shutter:hover .shutter-content,
.rainbow-shutter:hover>a {
    opacity: 1
}
.rainbow-shutter-lily::before,
.rainbow-shutter-lily::after {
    -webkit-box-shadow: inset 4rem 0 0 rgba(47, 164, 231, 0.2), inset 0 4rem 0 rgba(47, 164, 231, 0.2), inset -4rem 0 0 rgba(47, 164, 231, 0.2), inset 0 -9rem 0 rgba(47, 164, 231, 0.2);
    box-shadow: inset 4rem 0 0 rgba(47, 164, 231, 0.2), inset 0 4rem 0 rgba(47, 164, 231, 0.2), inset -4rem 0 0 rgba(47, 164, 231, 0.2), inset 0 -9rem 0 rgba(47, 164, 231, 0.2);
    -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out
}
.rainbow-shutter-lily::before {
    -webkit-transform: rotate(195deg);
    -ms-transform: rotate(195deg);
    -o-transform: rotate(195deg);
    transform: rotate(195deg)
}
.rainbow-shutter-lily::after {
    -webkit-transform: rotate(165deg);
    -ms-transform: rotate(165deg);
    -o-transform: rotate(165deg);
    transform: rotate(165deg)
}
.rainbow-shutter-lily:hover::before {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}
.rainbow-shutter-lily:hover::after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}
.rainbow-shutter-lily:hover::before,
.rainbow-shutter-lily:hover::after {
    border-radius: 36.6666%;
    -webkit-box-shadow: inset 2rem 0 0 rgba(3, 60, 115, 0.5), inset 0 2rem 0 rgba(115, 168, 57, 0.5), inset -2rem 0 0 rgba(221, 86, 0, 0.5), inset 0 -2rem 0 rgba(199, 28, 34, 0.5);
    box-shadow: inset 2rem 0 0 rgba(3, 60, 115, 0.5), inset 0 2rem 0 rgba(115, 168, 57, 0.5), inset -2rem 0 0 rgba(221, 86, 0, 0.5), inset 0 -2rem 0 rgba(199, 28, 34, 0.5)
}
.rainbow-shutter-square:hover {
    overflow: visible
}
.rainbow-shutter-square:hover,
.rainbow-shutter-square::before,
.rainbow-shutter-square::after,
.rainbow-shutter-square:hover::before,
.rainbow-shutter-square:hover::after {
    border-radius: 0
}