鼠标响应文字跳动效果

来源：互联网发布：java实现加减乘除编辑：程序博客网时间：2024/05/21 23:33

昨天看到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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------

33 0