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

查看演示立即下载

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

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

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

1	`<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!

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery新闻滚动播报插件BreakingNews
下一个特效：非常好的鼠标悬停动画按钮