CSS text effect style : demo 24

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Acme)
                        .demo{ background: linear-gradient(to right,#1e130c,#9a8478); }
                        .text-effect{
                            color: #fff;
                            font-family: 'Acme', sans-serif;
                            font-size: 100px;
                            font-weight: 700;
                            letter-spacing: 0.02em;
                            text-transform: uppercase;
                            text-shadow: 0 0 0.15em #7a040c;
                            margin: 50px auto 0;
                            white-space: nowrap;
                            filter: blur(0.007em);
                            position: relative;
                            z-index: 1;
                            animation: shake 2.5s linear infinite;
                        }
                        .text-effect:before,
                        .text-effect:after{
                            content: attr(data-tip);
                            transform: translateX(-50%) translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            animation: animate1 2.5s linear infinite;
                            -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
                            clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
                        }
                        .text-effect:after{
                            animation: animate2 2.5s linear infinite;
                            -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
                            clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
                        }
                        .text-effect span{
                            transform: translateX(-50%) translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
                            clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
                        }
                        @keyframes shake{
                            5%, 15%, 25%, 35%, 55%, 65%, 75%, 95%{
                                transform: translateY(0.018em) rotate(0deg);
                                filter: blur(0.018em);
                            }
                            10%, 30%, 40%, 50%, 70%, 80%, 90%{
                                transform: translateY(-0.018em) rotate(0deg);
                                filter: blur(0.01em);
                            }
                            20%, 60%{
                                transform: translate(-0.018em, 0.018em) rotate(0deg);
                                filter: blur(0.03em);
                            }
                            45%, 85%{
                                transform: translate(0.018em, -0.018em) rotate(0deg);
                                filter: blur(0.03em);
                            }
                            100%{
                                transform: translate(0) rotate(-0.5deg);
                                filter: blur(0.007em);
                            }
                        }
                        @keyframes animate1{
                             0%, 95%{ transform: translate(-50%, -50%); }
                            100%{ transform: translate(-51%, -45%); }
                        }
                        @keyframes animate2{
                              0%, 95%{ transform: translate(-50%, -50%); }
                            100%{ transform: translate(-49%, -55%); }
                        }
                        @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: 35px; }
                        }
                    
License Terms