<a class="link link--kukuri" href="#" data-letters="标题文本">标题文本</a>
//data-letters是移入显示的文本
.link {
outline: none;
text-decoration: none;
position: relative;
font-size: 20px;
color: #000000;
display: inline-block;
}
.link--kukuri {
text-transform: uppercase;
font-weight: 900;
overflow: hidden;
color: #000000;
}
.link--kukuri:hover {
color: #b2b0a9;
}
.link--kukuri::after {
content: "";
position: absolute;
height: 16px;
width: 100%;
top: 50%;
margin-top: -8px;
right: 0;
background: #f9f9f9;
transform: translate3d(-100%, 0, 0);
transition: transform 0.4s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.link--kukuri:hover::after {
transform: translate3d(100%, 0, 0);
}
.link--kukuri::before {
content: attr(data-letters);
position: absolute;
z-index: 2;
overflow: hidden;
color: #424242;
white-space: nowrap;
width: 0%;
transition: width 0.4s 0.3s;
}
.link--kukuri:hover::before {
width: 100%;
}
纯css标题样式
最新推荐文章于 2023-03-08 17:17:30 发布