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

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

 14285  157  查看评论 (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!

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

CSS3实现超酷的鼠标悬停效果

CSS3实现超酷的鼠标悬停效果
  悬停
 10866  195

JS超酷图片翻动展示效果

JS超酷图片翻动展示效果
  悬停
 12045  227

css3图片hover效果

16种基于Bootstrap的css3图片hover效果,点击弹出显示对应代码使用方便
  悬停
 5173  97

3D鼠标滑动效果

hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件
  悬停
 9123  118

讨论这个项目(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
取消回复