CSS text effect style : demo 68

B E S T J Q U E R Y

HTML

                        
B E S T J Q U E R Y

CSS

(Fonts required : Oxygen)
                        .text-effect{
                            color: #fff;
                            font-family: 'Oxygen', sans-serif;
                            text-align: center;
                            text-transform: uppercase;
                            margin: 50px auto 0;
                        }
                        .text-effect span{
                            background: #341f97;
                            font-size: 60px;
                            line-height: 50px;
                            padding: 15px 7px;
                            margin-right: 15px;
                            display: inline-block;
                        }
                        .text-effect span:nth-child(1){ animation: move 600ms ease 0ms infinite alternate; }
                        .text-effect span:nth-child(2){ animation: move 600ms ease 75ms infinite alternate; }
                        .text-effect span:nth-child(3){ animation: move 600ms ease 150ms infinite alternate; }
                        .text-effect span:nth-child(4){ animation: move 600ms ease 225ms infinite alternate; }
                        .text-effect span:nth-child(5){ animation: move 600ms ease 300ms infinite alternate; }
                        .text-effect span:nth-child(6){ animation: move 600ms ease 375ms infinite alternate; }
                        .text-effect span:nth-child(7){ animation: move 600ms ease 450ms infinite alternate; }
                        .text-effect span:nth-child(8){ animation: move 600ms ease 525ms infinite alternate; }
                        .text-effect span:nth-child(9){ animation: move 600ms ease 600ms infinite alternate; }
                        .text-effect span:nth-child(10){
                            margin-right: 0;
                            animation: move 600ms ease 675ms infinite alternate;
                        }
                        @keyframes move{
                            from{
                                box-shadow: 0 0 0 rgba(0,0,0,0);
                                border-radius: 50px;
                                transform: scale(1.0) translateY(0) rotateX(0deg);
                            }
                            to{
                                background: #7e48ea;
                                box-shadow: 0 25px 40px rgba(0,0,0,0.4);
                                border-radius: 0;
                                transform: scale(1.5) translateY(-25px) rotateX(45deg);
                            }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect span{ font-size: 60px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect span{ font-size: 40px; }
                        }
                        @media only screen and (max-width: 576px){
                            .text-effect span{ font-size: 25px; }
                        }
                        @media only screen and (max-width: 500px){
                            .text-effect span{
                                padding: 10px 5px;
                                margin-right: 5px;
                            }
                        }
                    
License Terms