TEXT STYLES & HOVER EFFECTS鼠标经过改变文字样式

所属分类：UI,其他-悬停,文本链接,动画效果

40158 493 查看评论 (8)

分享到微信朋友圈

查看演示立即下载

插件描述：当谈到小动画和对文本的影响,是一个链接,排版的标志或一个介绍性的句子,真的是没有限制的创意的可能性。所以今天我们想分享的文本风格和悬停效果让你的创造性思维。我们希望你喜欢他们,找到他们鼓舞人心!

让我们看看其中一个效果,“Kukuri”:

这种效应只是给A标签加一个data的属性:

<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>

所有连接的基本样式如下：

.link {
	outline: none;
	text - decoration: none;
	position: relative;
	font - size: 8em;
	line - height: 1;
	color: #9e9ba4;
	display: inline - bloc;
}

下面是动画效果的CSS：

.link--kukuri {
	text-transform:uppercase;
	font-weight:900;
	overflow:hidden;
	line-height:0.75;
	color:#b2b0a9;
}
.link--kukuri:hover {
	color:#b2b0a9;
}
.link--kukuri::after {
	content:'';
	position:absolute;
	gi  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%;
}

That`s all!

非常好的鼠标悬停动画按钮

jQuery新闻滚动播报插件BreakingNews

相关插件-悬停,文本链接,动画效果