CSS3如何实现绚丽的动画效果

发布时间:2022-02-25 16:52:55 作者:iii
来源:亿速云 阅读:160

这篇文章主要讲解了“CSS3如何实现绚丽的动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3如何实现绚丽的动画效果”吧!

举例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

<!DOCTYPE HTML>

<html>

<head>  

    <title>一个绚丽的CSS3动画效果</title>

    <style  type="text/css">

        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,

                       0 0 40px #ff00de,

                       0 0 70px #ff00de,

                       0 0 80px #ff00de,

                       0 0 100px #ff00de,

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

                           0 0 100px #3EFFee,

                           0 0 150px #3EFFee;

            }

            100% {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,

                           0 0 100px #3EFFee,

                           0 0 150px #3EFFee;

            }

            100% {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,

                           0 0 100px #3EFFee,

                           0 0 150px #3EFFee;

            }

            100% {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,

                           0 0 100px #3EFFee,

                           0 0 150px #3EFFee;

            }

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

        }

    </style>

</head>

<body>

    <h2>php中文网</h2>

</body>

</html>

效果如图:

CSS3如何实现绚丽的动画效果

分析:

看到这么牛逼的效果,相信小伙伴们都惊呆了吧!

这个例子综合了CSS3的很多技术,使用到了CSS3中的文字阴影text-shadow、变形效果transform、过渡效果transition以及动画效果animation等。

感谢各位的阅读,以上就是“CSS3如何实现绚丽的动画效果”的内容了,经过本文的学习后,相信大家对CSS3如何实现绚丽的动画效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. CSS3实现动画效果的案例
  2. css3实现动画效果的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:CSS怎么实现右侧底部悬浮效果

下一篇:怎么用纯CSS实现一个圆环旋转错觉的动画效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》