首页 > 代码库 > 鼠标响应文字跳动效果

鼠标响应文字跳动效果

2024-07-06 17:06:07   229人阅读

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

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

----------

-------------------------------

在线研究点击这里，下载收藏点击这里。

------------------------

------

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

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

效果一


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;
  }
}
效果二如果下图所示，当我们移动到文字上时，逐个文字跳动效果。

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;
  }
}
第三个效果，又加上了模糊滤镜如下图。

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利用阴影模拟实现3d文字的思路和解决方案，感兴趣的同学欢迎移步过去。

----------------------------------------------------------

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


联系
我们