CSS text effect style : demo 30

B e s t j Q u e r y

HTML

                        
B e s t j Q u e r y

CSS

(Fonts required : Noto Serif)
                        .text-effect{
                            color: transparent;
                            font-family: 'Noto Serif', serif;
                            font-size: 100px;
                            font-weight: 700;
                            text-align: center;
                            margin: 10px auto;
                            display: block;
                            overflow: hidden;
                            position: relative;
                        }
                        .text-effect span{
                            display: inline-block;
                            transform-style: preserve-3d;
                            position: relative;
                        }
                        .text-effect span:before,
                        .text-effect span:after{
                            content: attr(data-title);
                            color: rgba(0,0,0,0.2);
                            transform-origin: left top;
                            transform: scale(1.1, 1) skew(0deg, 20deg);
                            position: absolute;
                            top: 0;
                            left: -1px;
                            animation: animate 0.8s alternate infinite;
                        }
                        .text-effect span:after{
                            color: #684da3;
                            text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);
                            transform: rotateY(-50deg);
                            z-index: 2;
                            animation: animate 0.8s alternate infinite;
                        }
                        @keyframes animate{
                            100%{
                                transform: scale(1.1, 1) skew(0deg, 5deg);
                                transform: rotateY(-10deg);
                            }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 55px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 40px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect{ font-size: 33px; }
                        }
                    
License Terms