CSS text effect style : demo 67

B E S T J Q U E R Y

HTML

                        
B E S T J Q U E R Y

CSS

(Fonts required : Bitter)
                        .text-effect{
                            color: #000;
                            font-family: 'Bitter', serif;
                            font-size: 0;
                            text-align: center;
                            margin: 50px 0 0;
                        }
                        .text-effect span{
                            font-size: 28px;
                            background-color: #fff;
                            line-height: 100px;
                            height: 100px;
                            width: calc(100% / 12);
                            box-shadow: 0 40px 50px rgba(0,0,0,0.1);
                            border: 1px solid #fff;
                            display: inline-block;
                            vertical-align: top;
                            transition: all 0.3s ease;
                        }
                        .text-effect span:nth-child(odd){ animation: animate_1 1s ease-in-out infinite; }
                        .text-effect span:nth-child(even){ animation: animate_2 1s ease-in-out infinite; }
                        @keyframes animate_1{
                            0%{ transform: skewY(0); }
                            25%{ transform: skewY(15deg); }
                            50%{ transform: skewY(0); }
                            75%{ transform: skewY(-15deg);
                                background-color: #f9f9f9;
                                color: #999;
                            }
                            100%{ transform: skewY(0); }
                        }
                        @keyframes animate_2{
                            0%{ transform: skewY(0); }
                            25%{ transform: skewY(-15deg);
                                background-color: #f9f9f9;
                                color: #999;
                            }
                            50%{ transform: skewY(0); }
                            75%{ transform: skewY(15deg); }
                            100%{ transform: skewY(0); }
                        }
                    
License Terms