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

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

 9830  123  查看评论 (4)
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动画
  悬停
 8760  295

12种CSS3 hover效果插件

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

c的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。
  悬停
 7158  54

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

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

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

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