CSS text effect style : demo 69

B E S T J Q U E R Y

HTML

                        
B E S T J Q U E R Y

CSS

(Fonts required : Passion One)
                        .text-effect{
                            font-family: 'Passion One', sans-serif;
                            text-align: center;
                            margin: 30px auto 0;
                            perspective: 300px;
                        }
                        .text-effect span{
                            background: -webkit-linear-gradient(#fc6767, #ec008c);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            font-size: 100px;
                            transform-origin: 50% 50% -10px;
                            transform-style: preserve-3d;
                            display: inline-block;
                            animation: flip 1.5s infinite;
                        }
                        .text-effect span:nth-child(1){ animation-delay: 0.1s; }
                        .text-effect span:nth-child(2){ animation-delay: 0.2s; }
                        .text-effect span:nth-child(3){ animation-delay: 0.3s; }
                        .text-effect span:nth-child(4){ animation-delay: 0.4s; }
                        .text-effect span:nth-child(5){ animation-delay: 0.5s; }
                        .text-effect span:nth-child(6){ animation-delay: 0.6s; }
                        .text-effect span:nth-child(7){ animation-delay: 0.7s; }
                        .text-effect span:nth-child(8){ animation-delay: 0.8s; }
                        .text-effect span:nth-child(9){ animation-delay: 0.9s; }
                        .text-effect span:nth-child(10){ animation-delay: 1s; }
                        @keyframes flip{
                          to { transform: rotateY(360deg); }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect span{ font-size: 100px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect span{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 576px){
                            .text-effect span{ font-size: 60px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect span{ font-size: 50px; }
                        }
                    
License Terms