滑鼠響應文字跳動效果

前端開發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前端開發，分享相關資源，歡迎點贊，歡迎拍磚。
---------------------------------------------------------------------------------------------------------