HTML ve CSS ile Yanıp Sönen Metin

Merhaba arkadaşlar bugün sizlerle HTML ve CSS kullanarak yanıp sönen yazı yapacağız ben kodları aşağıya yazacağım siz kendi bilgisayarınızda uygulayarak yapabilirsiniz.

Bir span etiketi kullanarak WWW.TEKNOBU.NET yazısını yanıp sönen yazı yapacağız. Html Kodumuz aşağıdaki gibi olacaktır.

<div class="blink"><span>www.teknobu.net</span></div>

Ve son olarak CSS kodu

    .blink{
        width:200px;
        height: 50px;
        background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
    }
    span{
        font-size: 25px;
        font-family: cursive;
        color: white;
        animation: blink 1s linear infinite;
    }
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

Ekran Çıktısı

See the Pen CSS3 blinking text animation by onder (@onderh) on CodePen.