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

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

 10437  129  查看评论 (5)
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延迟误操作插件-hoverIntent

这是一款非常有用的插件,很多导航在鼠标快速移动经过时触发,造成很多误操作,jQuery延迟操作误插件-hoverIntent将帮助您好解决这个问题。
  悬停
 11919  27

30种炫酷CSS鼠标滑过按钮特效

这是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框,文本动画以及流光动画效果,各种效果都非常有创意。
  悬停
 5805  111

jQuery显示字幕插件Captall

jQuery的Captall是一个创建于图像或任何DOM元素的标题插件。
  悬停
 11828  27

各种鼠标移入效果

各种鼠标移入效果
  悬停
 9392  168

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

    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
取消回复