CSS text effect style : demo 46

B e s t j Q u e r y

HTML

                        
B e s t j Q u e r y

CSS

(Fonts required : Merienda)
                        .text-effect{
                            font-family: 'Merienda', cursive;
                            text-align: center;
                        }
                        .text-effect span{
                            color: #fff;
                            font-size: 100px;
                            display: inline-block;
                            text-shadow: 1px 1px 5px #dddddd,2px 2px 5px #ffffff,3px 3px 5px #ffffff,
                                        4px 4px 5px #ffffff,5px 5px 5px #ffffff,6px 6px 5px #adadad,
                                        7px 7px 5px #adadad,8px 8px 5px #adadad,9px 9px 5px #adadad,
                                        10px 10px 5px #adadad,11px 11px 5px ,12px 12px 5px ;
                            opacity: 0.4;
                            animation: myanim 2s infinite linear;
                        }
                        @keyframes myanim{
                            10%{
                                color: #e7e7e7;
                                opacity: 0.4;
                                transform: scale(1)rotate(0deg);
                            }
                            40%{
                                color: #d63031;
                                text-shadow:7px 7px 7px #fff,0px 0px 20px #555;
                                opacity: 1;
                                transform: scale(1)rotate(-3deg);
                            }
                            80%{
                                color: #e7e7e7;
                                opacity: 0.4;
                                transform: scale(1)rotate(3deg);
                            }
                            100%{
                                color: #6c5ce7;
                                text-shadow:7px 7px 7px #fff,0px 0px 20px #555;
                                opacity: 1;
                                transform: scale(1)rotate(0deg);
                            }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect span{ font-size: 65px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect span{ font-size: 50px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect span{ font-size: 36px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect span{ font-size: 27px; }
                        }
                    
License Terms