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

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

 8813  114  查看评论 (3)
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!

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

6款jquery鼠标悬停图文切换效果

6款jquery鼠标悬停图文切换效果
  悬停
 6261  73

仿淘宝业务icon动画图标

仿淘宝icon鼠标悬停动画图标,纯手打使用jquery框架
  悬停
 6090  56

jQuery图片悬停插件HoverEx

图片悬停精美动画效果HoverEx插件
  悬停
 3724  84

jQuery hover时实现浮动

以简单的实现hover是的效果,加入了延时误操作处理鼠标快速滑过不会被触发。
  悬停
 4425  30

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

    萤火之森0
    2017/1/9 15:01:51
    SiriBen0
    2016/12/30 16:12:49

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

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

    灬尐壞蛋兒灬

    火星