CSS text effect style : demo 31

B e s t J Q u e r y

HTML

                        
B e s t J Q u e r y

CSS

(Fonts required : Graduate)
                        .text-effect{
                            color: #e74c3c;
                            font-family: 'Graduate', cursive;
                            font-weight: 700;
                            text-align: center;
                            text-transform: capitalize;
                            text-shadow: 2px 2px 3px #111;
                        }
                        .text-effect span{
                            font-size: 100px;
                            animation: animate 2s alternate infinite;
                        }
                        .text-effect span:nth-child(2n){ animation-delay:0.5s; }
                        @keyframes animate{
                            100%{ font-size: 60px; }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect span{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect span{ font-size: 55px; }
                            @keyframes animate{
                                100%{ font-size: 45px; }
                            }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect span{ font-size: 40px; }
                            @keyframes animate{
                                100%{ font-size: 33px; }
                            }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect span{ font-size: 33px; }
                            @keyframes animate{
                                100%{ font-size: 25px; }
                            }
                        }
                    
License Terms