CSS3——过渡与动画（实现炫酷下拉）

Posted WEB及UI设计

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3——过渡与动画（实现炫酷下拉）相关的知识，希望对你有一定的参考价值。

过渡与动画概念理解

css3过渡

化用菜鸟教程的说法，CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1.指定要添加效果的CSS属性。2.指定效果的持续时间。

css3动画

化用菜鸟教程的说法，CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。指定至少这两个CSS3的动画属性绑定向一个选择器：1.规定动画的名称。2.规定动画的时长。

3.过渡案例-炫酷下拉

3-1原理分析

1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表
2.然后发现，下拉里面，每一个选项是从不同的两个方向出现的
3.出现的方式是奇数项从左边进，偶数项从右边进，进入方式是滑动淡入。

3-2实现过程

1.首先页面的布局，这个应该大家都知道，菜单无非就是一个ul-li列表，下拉列表就是li下面的一个ul-li。

reset.css（样式重置表和个人常用样式封装）

javascript

1

*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}

html代码如下

JavaScript

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

<div class="demo-nav">

    <!--.fllil,.clear是在样式重置表（reset.css）上写好的样式，.fllil li{fload:left;}.clear{clear:both;}-->

    <ul class="menu fllil">

        <li>HTML5

            <ul class="sub-menu">

                <li>article</li>

                <li>section</li>

                <li>menu</li>

                <li>nav</li>

            </ul>

        </li>

        <li>CSS3

            <ul class="sub-menu">

                <li>动画</li>

                <li>过渡</li>

                <li>圆形</li>

                <li>边框</li>

            </ul>

        </li>

        <li>Javascript

            <ul class="sub-menu">

                <li>字符串</li>

                <li>数组</li>

                <li>对象</li>

                <li>布尔</li>

            </ul>

        </li>

        <li>Jquery

            <ul class="sub-menu">

                <li>动画</li>

                <li>特效</li>

                <li>AJAX</li>

            </ul>

        </li>

        <li>VUE</li>

    </ul>

    <div class="clear"></div>

</div>

css代码如下

JavaScript

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

    .demo-nav {

        width: 500px;

        margin: 0 auto;

    }

 

    .demo-nav li {

        line-height: 40px;

        padding: 0 10px;

        background: #09f;

        color: #fff;

        position: relative;

    }

 

    .demo-nav li ul {

        position: absolute;

        left: 0;

        top: 40px;

        height: 0;

        overflow: hidden;

    }

 

    .demo-nav li ul li {

        float: none;

        /*过渡代码*/

        transition: all .3s;

        background: #f90;

        opacity: 0;

    }

    /*奇数项初始往右边偏移100%*/

    .demo-nav li ul li:nth-of-type(1n) {

        transform: translate3d(100%, 0, 0);

    }

    /*偶数项初始往左边偏移100%*/

    .demo-nav li ul li:nth-of-type(2n) {

        transform: translate3d(-100%, 0, 0);

    }

 

    .demo-nav li:hover ul {

        overflow: visible;

    }

    /*透明度和互动同时进行*/

    .demo-nav li:hover ul li {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

注意1：在显示下拉列表的操作上，刚开始隐藏子菜单ul的样式，不能这样写.demo-nav li ul{display:none;}。要这样写.demo-nav li ul{height: 0;overflow:hidden;}，鼠标放上父级li的时候，显示ul不能这样写.demo-nav li:hover ul{display:block;}，要这样写，.demo-nav li:hover ul{overflow: visible;}因为一开始如果子菜单ul是隐藏的，鼠标放到父级li的时候，子菜单ul就显示出来，这样是看到子菜单ul下面li的动画的。

CSS3——过渡与动画（实现炫酷下拉）

注意2：子菜单ul要用.demo-nav li ul{height: 0;overflow:hidden;}隐藏，在显示的时候再设置.demo-nav li:hover ul{overflow: visible;}。这一步不能省，否则会出问题。如果不加，实际上子菜单ul，以及子菜单ul下面的li一直在页面上，如果鼠标移上去子菜单ul，以及子菜单ul下面的li。那么实际上也会触发父级li的hover。

3-3与JS实现对比

这个效果js也是能实现，实现上也不难，无非就是调用定时器的问题。但是写的肯定比css3多，逻辑也会比css3复杂。
1.首先，父级li必须要绑定一个鼠标移出和移入事件，也要定义一个属性，记录定时器（不同的父级li不能共用一个定时器，不然会受到干扰，必须每一个父级li下面都要有一个属性记录定时器）。obj.timer=setInterval(function(){},100)
2.用js实现，实际上也是操作class或者css。所以性能上css3是比js好！
3.针对这个动画，css3也比js好控制。

3-4完整代码

JavaScript

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

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ec-css导航栏</title>

    <link rel="stylesheet" href="reset.css">

    <style>

        .demo-nav {

            width: 500px;

            margin: 0 auto;

        }

 

        .demo-nav li {

            line-height: 40px;

            padding: 0 10px;

            background: #09f;

            color: #fff;

            position: relative;

        }

 

        .demo-nav li ul {

            position: absolute;

            left: 0;

            top: 40px;

            /*height: 0;*/

            /*overflow: hidden;*/

        }

 

        .demo-nav li ul li {

            float: none;

            transition: all .3s;

            background: #f90;

            opacity: 0;

        }

 

        .demo-nav li ul li:nth-of-type(1n) {

            transform: translate3d(100%, 0, 0);

        }

 

        .demo-nav li ul li:nth-of-type(2n) {

            transform: translate3d(-100%, 0, 0);

        }

 

        .demo-nav li:hover ul {

            /*overflow: visible;*/

        }

 

        .demo-nav li:hover ul li {

            opacity: 1;

            transform: translate3d(0, 0, 0);

        }

        /*最多10级，超过10级的，得写js*/

        .demo-nav li ul li:nth-of-type(2) {

            transition-delay: .1s;

        }

 

        .demo-nav li ul li:nth-of-type(3) {

            transition-delay: .2s;

        }

 

        .demo-nav li ul li:nth-of-type(4) {

            transition-delay: .3s;

        }

        .demo-nav li ul li:nth-of-type(5) {

            transition-delay: .4s;

        }

 

        .demo-nav li ul li:nth-of-type(6) {

            transition-delay: .5s;

        }

 

        .demo-nav li ul li:nth-of-type(7) {

            transition-delay: .6s;

        }

        .demo-nav li ul li:nth-of-type(8) {

            transition-delay: .7s;

        }

 

        .demo-nav li ul li:nth-of-type(9) {

            transition-delay: .8s;

        }

 

        .demo-nav li ul li:nth-of-type(10) {

            transition-delay: .9s;

        }

    </style>

</head>

<body>

<div class="demo-nav">

    <ul class="menu fllil">

        <li>HTML5

            <ul class="sub-menu">

                <li>article</li>

                <li>section</li>

                <li>menu</li>

                <li>nav</li>

            </ul>

        </li>

        <li>CSS3

            <ul class="sub-menu">

                <li>动画</li>

                <li>过渡</li>

                <li>圆形</li>

                <li>边框</li>

            </ul>

        </li>

        <li>Javascript

            <ul class="sub-menu">

                <li>字符串</li>

                <li>数组</li>

                <li>对象</li>

                <li>布尔</li>

            </ul>

        </li>

        <li>Jquery

            <ul class="sub-menu">

                <li>动画</li>

                <li>特效</li>

                <li>AJAX</li>

            </ul>

        </li>

        <li>VUE</li>

    </ul>

    <div class="clear"></div>

</div>

</body>

</html>


以上是关于CSS3——过渡与动画（实现炫酷下拉）的主要内容，如果未能解决你的问题，请参考以下文章

编写自己的代码库(css3常用动画的实现)

CSS 实现炫酷文本过渡动画

《精通 CSS3 动画（学完这个课写炫酷页面）》

CSS3实现炫酷游戏3D翻转动画制作

CSS3 动画过渡：不透明度不起作用

CSS3实践之路:CSS3的过渡效果(transition)与动画(animation)