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

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

 9159  118  查看评论 (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!

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

jquery简单关灯效果插件

jQuery实现鼠标移动到当前图片其它图片变暗效果
  悬停
 4940  32

鼠标滑过特效

模块变暗,出现遮罩层,12种炫酷的CSS3鼠标滑过图片遮罩层动画特效.
  悬停
 8380  112

js鼠标滑过方向感效果

js鼠标滑过方向感知三维立方体动画
  悬停
 955  25

CSS3 animation鼠标滑过特效

基于CSS3 animation的鼠标滑过按钮特效
  悬停
 4627  80

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

    灬尐壞蛋兒灬

    火星