Mouse response text beating Effect

Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Yesterday, I saw an article on html5tricks, jQuery mouse slide over the text beating animation plug-in. I can't help but use sass and css3 to implement it and extend it. I hope it will help you.

----------

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

Click here for online research, and click here for download and favorites.

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

------

First, let's get an advertisement, the previous two blog posts "recommended for pure CSS3 text effects" and "Best Practices for CSS3 stereo text" respectively recommended the effects of css3 and the idea of parsing css3 using shadow simulation to implement 3d text. and solutions, if you are interested, please move on.

Let's take a look at today's results.

Result 1

Html file

<H1> don't forget to move the mouse over the text. Css file



Body {background-color: #7 ABCFF;} @ import url (http://fonts.googleapis.com/css? Family = Dosis: 500,800);/*** use text-shadow to achieve 3d text effects ** $ initial color of the color ry character * $ dx ry horizontal offset position, dx> 0, to the right. We recommend that you set the value to [-] * $ dy vertical offset, dy> 0, and downward offset. We recommend that you set the value to [-]. dx and dy work together to control the direction of the three-dimensional character * $ Number of stacked steps three-dimensional characters * $ the color of the darken three-dimensional character is dimmed. The recommended value is [0, 1], which must be combined with the number of stacked characters, avoid excessive black appearance * @ copyright front-end development 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.3, 0,), # {$ x} # {$ y} 1px rgba, 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;}/* implement different colors */@ 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 );}}
Effect 1 self-implementation

/* Effect 1: Random landing effect */. required t01 {margin-top: 50px;} @ for $ n from 1 to 10 {. effect01: hover span: nth-child (# {$ n}) {position: relative; animation: go 0.1 s * random (50) 0.25 s * random (4 );}} @ keyframes go {0%, 75%, 90%, 100% {top: 0;} 65% {top:-100px;} 85% {top:-20px;} 95% {top: -5px ;}}
As shown in effect 2, when we move to the text, the text will beat one by one.


Css file

/* Effect 2: shift over and off */. effect02 span {position: relative; top: 0; transition: all 1 s functions;} @ for $ n from 1 to 10 {. required t02 span: hover {top:-10px * random (20); transition: all. 1 s bytes-in-out ;}}
The third effect, coupled with a fuzzy filter.


Css file

/* Effect 3: Move Over blur */. effect03 span {position: relative; top: 0; opacity: 1;-webkit-filter: blur (0); transition: all 0.6 s ;} @ for $ n from 1 to 10 {. effect03 span: hover {top:-12px * random (20); opacity: 0.05 * random (10);-webkit-filter: blur (10px); transition: all. 1 s bytes-in-out ;}}
Summary: In today's cases, we mainly use the sass @ for command and the random number in compass to set different animation states for the text and use transition or animation for animation.

That's it.
The previous two blog posts "recommended for pure CSS3 text effects" and "Best Practices for CSS3 stereo text" respectively recommended the effects of css3 and the idea of parsing css3 using shadow simulation to implement 3d text. and solutions, if you are interested, please move on.


----------------------------------------------------------
Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------