html文字简单动画效果,CSS3一个简单的按钮悬停波浪文本动画效果

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Roboto:900");

body {

background: #111;

}

a {

font-family: "Roboto", sans-serif;

font-weight: 900;

color: black;

text-decoration: none;

}

.centered {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

.h-button {

background: white;

padding: 20px;

width: 250px;

text-align: center;

}

.h-button span {

display: inline-block;

min-width: 0.3em;

text-transform: uppercase;

transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);

opacity: 0;

transform: translate(0, -20px);

}

.h-button:before {

content: attr(data-text);

position: absolute;

width: 100%;

left: 0;

transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);

text-transform: uppercase;

letter-spacing: 3.5px;

opacity: 1;

transform: translate(0, 0px);

}

.h-button:hover:before,

.h-button:focus:before {

opacity: 0;

transform: translate(0, 20px);

}

.h-button:hover span,

.h-button:focus span {

opacity: 1;

transform: translate(0, 0);

}

.h-button:hover span:nth-child(1),

.h-button:focus span:nth-child(1) {

transition-delay: 0.025s;

}

.h-button:hover span:nth-child(2),

.h-button:focus span:nth-child(2) {

transition-delay: 0.05s;

}

.h-button:hover span:nth-child(3),

.h-button:focus span:nth-child(3) {

transition-delay: 0.075s;

}

.h-button:hover span:nth-child(4),

.h-button:focus span:nth-child(4) {

transition-delay: 0.1s;

}

.h-button:hover span:nth-child(5),

.h-button:focus span:nth-child(5) {

transition-delay: 0.125s;

}

.h-button:hover span:nth-child(6),

.h-button:focus span:nth-child(6) {

transition-delay: 0.15s;

}