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

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

 16801  169  查看评论 (6)
TEXT STYLES & HOVER EFFECTS鼠标经过改变文字样式 ie兼容9

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

Image


这种效应只是给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)
  悬停
 9127  105

12种CSS3 hover效果插件

非常好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验
  悬停
 17197  145

图片添加遮罩

根据鼠标进入的位置插入遮罩
  悬停
 11974  105

15款css3鼠标悬停图片动画文字效果

15款css3鼠标悬停图片动画文字效果
  悬停
 17322  167

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    自招 0
    2017/9/18 8:43:58
    Vincent 0
    2017/4/13 15:13:34
    0
    2017/2/9 9:59:35
    萤火之森 0
    2017/1/9 15:01:51
    SiriBen 0
    2016/12/30 16:12:49

    很棒,应用在LOGO处很炫,但只有在PC上才行,毕竟移动端对鼠标移动没支持

    回复
    云淡风轻 0
    2015/6/18 14:53:43
取消回复