鼠标响应文字跳动效果

╰+哭是因爲堅強的太久メ 2022-08-27 10:49 152阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

昨天看到[html5tricks][]上的一篇文章《[jQuery鼠标滑过文字跳动动画插件][jQuery]》，止不住手痒用sass、css3实现一下，并进行了扩展，希望能对大家有所帮助。

\----------

\-------------------------------

**[在线研究][Link 1]点击这里，[下载收藏][Link 2]点击这里。**

\------------------------

\------

首先来个广告，嘎嘎，前面两篇博文《[纯CSS3文字效果推荐][CSS3]》、《[CSS3立体文字最佳实践][CSS3 1]》分别给大家推荐过css3实现的效果、解析过css3利用阴影模拟实现3d文字的思路和解决方案，感兴趣的同学欢迎移步过去。

好，言归正传，我们来看看今天的效果。

效果一

![1401461222_4628.gif-thumb.jpg][]

html文件

<h1>别忘了在文字上移动鼠标哟</h1>
    <div class="text effect01">前端开发whqet</div>
    <div class="text effect02">前端开发whqet</div>
    <div class="text effect03">前端开发whqet</div>

css文件

body{
      background-color: #7ABCFF;
    }
    @import url(http://fonts.googleapis.com/css?family=Dosis:500,800);
    /**
    * 利用text-shadow实现3d文字效果
    *
    * $color     立体字的初始颜色
    * $dx        立体字水平偏移位置，dx>0,向右偏，建议取值[-2,2]
    * $dy        立体字垂直偏移位置，dy>0,向下偏，建议取值[-2,2]，dx和dy配合控制立体字的方向
    * $steps     立体字的层叠数量
    * $darken    立体字的颜色变暗数值，建议取值[0,1],需要结合层叠数量，避免过多的黑色出现
    * @copyright 前端开发whqet，http://blog.csdn.net/whqet 
    */
    @mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {
      color:$color;
      $color:darken($color,30%);
    
      $output: '';
      $x:0px;
      $y:0px;
      @for $n from 1 to $steps{
        $output: $output + '#{$x} #{$y} 0 #{$color},';
        $x:$x+$dx;
        $y:$y+$dy;
        $color:darken($color, $darken * ($n+10));
      }
      $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5)';
      
      //for the mordern browser
      text-shadow:unquote($output);
      
      //just for ie9-
      //@include jquery-text-shadow(unquote($output));
    }
    .text {
        font-family:"微软雅黑", "Dosis", sans-serif;
        font-size: 80px;
        text-align: center;
        font-weight: bold;
        line-height:200px;
        text-transform:uppercase;
        cursor: pointer;
    }/*实现不同颜色字*/
    @for $n from 1 to 10{
      .text span:nth-child(#{$n}){
        $color:adjust-hue(#9a84fd, $n*36deg);
        @include text3d($color,0.5,-1,5,.5);
      }
    }

效果一自身实现

/*效果一，随机起落效果*/
    .effect01{
        margin-top:50px;
    }
    @for $n from 1 to 10{
      .effect01:hover span:nth-child(#{$n}){
          position: relative;
          animation: go 0.1s*random(50) 0.25s*random(4);
      }
    }
    @keyframes go{
      0%,75%,90%,100%{
        top:0;
      }
      65%{
        top:-100px;
      }
      85%{
        top:-20px;
      }
      95%{
        top:-5px;
      }
    }

效果二如果下图所示，当我们移动到文字上时，逐个文字跳动效果。

![1401461223_3939.gif-thumb.jpg][]

css文件

/*效果二，移过起落效果*/
    .effect02 span{
      position: relative;  
      top:0;
      transition:all 1s ease;
    }
    @for $n from 1 to 10{
      .effect02 span:hover{
        top:-10px*random(20);
        transition:all .1s ease-in-out;
      }
    }

第三个效果，又加上了模糊滤镜如下图。

![1401461224_6102.gif-thumb.jpg][]

css文件

/*效果三，移过模糊效果*/
    .effect03 span{
      position: relative;
      top:0;
      opacity: 1;
      -webkit-filter:blur(0);
      transition:all 0.6s;
    }
    @for $n from 1 to 10{
      .effect03 span:hover{
        top:-12px*random(20);
        opacity: 0.05*random(10);
        -webkit-filter:blur(10px);
        transition:all .1s ease-in-out;
      }
    }

总结，今天的这些案例，主要利用sass@for指令、compass里的random随机数，给文字设置不同的动画状态，利用transition或animation实现动画。

That's it。

前面两篇博文《[纯CSS3文字效果推荐][CSS3]》、《[CSS3立体文字最佳实践][CSS3 1]》分别给大家推荐过css3实现的效果、解析过css3利用阴影模拟实现3d文字的思路和解决方案，感兴趣的同学欢迎移步过去。

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[html5tricks]: http://www.html5tricks.com/
[jQuery]: http://www.html5tricks.com/jquery-text-jump-effect.html
[Link 1]: http://codepen.io/whqet/pen/eGuqf
[Link 2]: http://codepen.io/whqet/share/zip/eGuqf/
[CSS3]: http://blog.csdn.net/whqet/article/details/24793049
[CSS3 1]: http://blog.csdn.net/whqet/article/details/25051237
[1401461222_4628.gif-thumb.jpg]: https://img-my.csdn.net/uploads/201405/30/1401461222_4628.gif-thumb.jpg
[1401461223_3939.gif-thumb.jpg]: https://img-my.csdn.net/uploads/201405/30/1401461223_3939.gif-thumb.jpg
[1401461224_6102.gif-thumb.jpg]: https://img-my.csdn.net/uploads/201405/30/1401461224_6102.gif-thumb.jpg
[whqet]: http://blog.csdn.net/whqet