Shulou(Shulou.com)06/01 Report--

This article mainly explains "CSS3 how to achieve gorgeous animation effects", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "CSS3 how to achieve gorgeous animation effects" bar!

For example:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

forty-nine

fifty

fifty-one

fifty-two

fifty-three

fifty-four

fifty-five

fifty-six

fifty-seven

fifty-eight

fifty-nine

sixty

sixty-one

sixty-two

sixty-three

sixty-four

sixty-five

sixty-six

sixty-seven

sixty-eight

sixty-nine

seventy

seventy-one

seventy-two

seventy-three

seventy-four

seventy-five

seventy-six

seventy-seven

seventy-eight

seventy-nine

eighty

eighty-one

eighty-two

eighty-three

eighty-four

eighty-five

eighty-six

eighty-seven

eighty-eight

eighty-nine

ninety

ninety-one

ninety-two

ninety-three

ninety-four

ninety-five

ninety-six

ninety-seven

ninety-eight

ninety-nine

one hundred

one hundred and one

one hundred and two

one hundred and three

one hundred and four

one hundred and five

one hundred and six

one hundred and seven

one hundred and eight

one hundred and nine

A gorgeous CSS3 animation effect

Body {background:#000;}

H2

{

Text-align:center

Color:#fff

Font-size:48px

Text-shadow: 1px 1px 1px # ccc

0 0 10px # fff

0 0 20px # fff

0 0 30px # fff

00 40px # ff00de

00 70px # ff00de

00 80px # ff00de

00 100px # ff00de

00 150px # ff00de

Transform-style: preserve-3d

-moz-transform-style: preserve-3d

-webkit-transform-style: preserve-3d

-ms-transform-style: preserve-3d

-o-transform-style: preserve-3d

Animation: run ease-in-out 9s infinite

-moz-animation: run ease-in-out 9s infinite

-webkit-animation: run ease-in-out 9s infinite

-ms-animation: run ease-in-out 9s infinite

-o-animation: run ease-in-out 9s infinite

}

@ keyframes run

{

0% {transform:rotateX (- 5deg) rotateY (0);}

50%

{

Transform:rotateX (0) rotateY (180deg)

Text-shadow: 1px 1px 1px # ccc

0 0 10px # fff

0 0 20px # fff

0 0 30px # fff

0 0 40px # 3EFF3E

0 0 70px # 3EFFff

0 0 80px # 3EFFff

00 100px # 3EFFee

0 0 150px # 3EFFee

}

{transform:rotateX (5deg) rotateY (360deg);}

}

@-webkit-keyframes run

{

0% {transform:rotateX (- 5deg) rotateY (0);}

50%

{

Transform:rotateX (0) rotateY (180deg)

Text-shadow: 1px 1px 1px # ccc

0 0 10px # fff

0 0 20px # fff

0 0 30px # fff

0 0 40px # 3EFF3E

0 0 70px # 3EFFff

0 0 80px # 3EFFff

00 100px # 3EFFee

0 0 150px # 3EFFee

}

{transform:rotateX (5deg) rotateY (360deg);}

}

@-moz-keyframes run

{

0% {transform:rotateX (- 5deg) rotateY (0);}

50%

{

Transform:rotateX (0) rotateY (180deg)

Text-shadow: 1px 1px 1px # ccc

0 0 10px # fff

0 0 20px # fff

0 0 30px # fff

0 0 40px # 3EFF3E

0 0 70px # 3EFFff

0 0 80px # 3EFFff

00 100px # 3EFFee

0 0 150px # 3EFFee

}

{transform:rotateX (5deg) rotateY (360deg);}

}

@-ms-keyframes run

{

0% {transform:rotateX (- 5deg) rotateY (0);}

50%

{

Transform:rotateX (0) rotateY (180deg)

Text-shadow: 1px 1px 1px # ccc

0 0 10px # fff

0 0 20px # fff

0 0 30px # fff

0 0 40px # 3EFF3E

0 0 70px # 3EFFff

0 0 80px # 3EFFff

00 100px # 3EFFee

0 0 150px # 3EFFee

}

{transform:rotateX (5deg) rotateY (360deg);}

}

Php Chinese website

The effect is as shown in the figure:

Analysis:

Seeing such a powerful effect, I believe my friends are stunned!

This example combines many techniques of CSS3, using text shadow text-shadow in CSS3, deformation effect transform, transition effect transition, animation effect animation and so on.

Thank you for reading, the above is the content of "how to achieve gorgeous animation effects in CSS3". After the study of this article, I believe you have a deeper understanding of how to achieve gorgeous animation effects in CSS3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.