Mouse response text beating Effect

Source: Internet
Author: User

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 ---------------------------------------------------------------------------------------------------------

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.