首页 > web前端 > css教程 > css3 小图标提示特效

css3 小图标提示特效

高洛峰
发布: 2017-02-20 12:48:32
原创
1737 人浏览过

赶紧上例子咯

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

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/normalize.css" />/*normalize这个css框架呢,可以去搜搜,挺好用的*/

    <link rel="stylesheet" href="css/font-awesome.min.css" />/*这个呢,是小图标css框架,用法和bootstrap差不多*/

    <style>

        *,*:before,*:after{

            -ms-box-sizing:border-box;

            -o-box-sizing:border-box;

            -moz-box-sizing:border-box;

            -webkit-box-sizing:border-box;

             

            box-sizing:border-box;/*这里主要是想真正的widdth就是width,不要把什么padding啊,border啊等加进来,这才真正的符合人的视角*/

        }

        html,body{

            width: 100%;

            height: 100%;

            background: rgba(95, 234, 234, 0.8);

            font-size: 24px;

            font-weight: 600;

            font-family: "arial black";

        }

        ul,li{

            list-style: none;

            display: inline-block;

        }

        a{

            display: block;

            text-decoration: none;

            color:rgba(0,0,0,0.3);

        }

        li{

            padding: 20px 0;

            margin: 0 10px;

        }

        .da{

            width: 700px;

            margin-top: 200px;

 

            margin-left: 50%;

            -webkit-transform:translateX(-50%);/*这两行代码也是居中的技巧*/

 

        }

        .da li{

            width: 100px;

            height: 100px;

             

            text-align: center;

            position: relative;

            z-index: 999;/*一定位就要想到z-index,不管有没有用*/

        }

        .da span{

            position: absolute;

            bottom:100%;/*我归之为“巧用100%”,先什么left,top 啊,都不加,光是position看看,因为%是相对于他的父类,如果他的上边贴紧父类的上边框,这就是不是可以考虑用100%了呢?*/

                        left: 60%;

            margin-left: -50%;

                        z-index: 9998;

            width: 80px;

            height: 80px;

            background: #fff;

            border-radius: 50%;/*圆角*/

            color:rgba(12, 130, 130, 0.8);

 

            opacity: 0;

            transition:opacity 0.3;/*css3很重要的标签,过渡。4个值,标签名(对象是谁)时间(多久)方式(匀速啊,变速啊,先怎么后怎么样啊)延迟时间(等多久开始)我这里只用到前两个*/

        }

        .da span:after{/*做完今天这个,我感觉伪类就是来修修补补,或者拼接用的,当然,他还有一个很好用的东东,就是清除浮动{content:“”;display:block;clear:both,核心这个}*/

            content: "";

            width: 40px;

            height: 40px;

            background: url(imges/tip.svg) no-repeat;/*avg格式的图片,不会因为变大而失真*/

            position: absolute;

            top:100%;

            left:80%;

            margin-left: -50%;

            margin-top: -8px;

             

        }

        .da i{

            position: absolute;

            left:85%;

            margin-left:-50%;

            margin-top:30px;

            margin-bottom: 20px;   

        }

                /*-----------------------接下来就是核心代码,前边是在搭框架-----------------------------------------------------------------*/

        span{

            transition:transform 0.3s;

            -webkit-transition:transform 0.3s;

        }

        span i{

            transition:transform 0.1s;

            -webkit-transition:transform 0.1s;

        }

        li:hover span{

            transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);

            -webkit-transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);

            opacity: 1;

        }

        li:hover span i{

            transform:scale3d(1,1,1) translate3d(0,0,0);

            -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);

        }/*这里每个类吧相同的都提出来了,相同的是什么?就是最终的状态是一样的*/

登录后复制

1

/*接下来就是每个分部分,rotatwd旋转角度 scale缩放 translate平移 其中加了3d就是让他进行3d变换,当然还有一个2d。  */

登录后复制

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

        span.content1{

            transform-origin: center bottom;

            -webkit-transform-origin: center bottom;

            transform:rotate3d(1,1,1,60deg);

            -webkit-transform:rotate3d(1,1,1,60deg);

        }

        span.content1 i{

            transform:scale3d(0.01,0.01,1);

            -webkit-transform:scale3d(0.01,0.01,1);

        }

        span.content2{

            transform-origin: center bottom;

            -webkit-transform-origin: center bottom;

            transform:translate3d(0,20px,0);

            -webkit-transform:translate3d(0,20px,0);

        }

        span.content2 i{

            transform:translate3d(0,10px,0);

            -webkit-transform:translate3d(0,10px,0);

        }

        span.content3{

            transform-origin: center bottom;

            -webkit-transform-origin: center bottom;

            transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);

            -webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);

        }

        span.content3 i{

            transform:translate3d(0,-2px,0);

            -webkit-transform:translate3d(0,-2px,0);

        }

        span.content4{

            transform:translate3d(0,-12px,0);

            -webkit-transform:translate3d(0,-12px,0);

        }

        span.content4 i{

            transform:translate3d(0,12px,0);

            -webkit-transform:translate3d(0,12px,0);

        }

        span.content5{

            transform:scale(0.01) translate3d(0,10px,0);/*最重要的,就是scale如果你把它缩成0,可能会发生效果不发出现的情况,不行你可以去试,所以尽可能把他弄成0,01*/

            -webkit-transform:scale(0.01) translate3d(0,10px,0);

        }

        span.content5 i{

            transform:translate3d(0,20px,0);

            -webkit-transform:translate3d(0,20px,0);

        }

    </style>

    </head>

    <body>

    <p class="da">

        <ul>

            <li>

                <a href="#">nomalse<span class="content1"><i class="fa fa-camera"></i></span></a>

            </li>

            <li>

                <a href="#">palse<span class="content2" ><i class="fa fa-bicycle"></i></span></a>

            </li>

            <li>

                <a href="#">mate<span class="content3" ><i class="fa fa-bus"></i></span></a>

            </li>

            <li>

                <a href="#">script<span class="content4"><i class="fa fa-ship"></i></span></a>

            </li>

            <li>

                <a href="#">css3<span class="content5"><i class="fa fa-plane"></i></span></a>

            </li>

        </ul>

    </p>

    </body>

 

</html>  

登录后复制

 更多css3 小图标提示特效 相关文章请关注PHP中文网!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板