Rumah > hujung hadapan web > tutorial css > css3中animation属性实现箭头向右滚动渐隐的代码

css3中animation属性实现箭头向右滚动渐隐的代码

不言
Lepaskan: 2018-08-10 11:42:56
asal
3245 orang telah melayarinya

这篇文章给大家介绍的内容是关于css3中animation属性实现箭头向右滚动渐隐的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

这是一个右箭头的小图标。

keyframes 创建一个css3动画用 animation 调用 并用延迟动画的办法 做出匀速滚动的效果。

直接贴上html代码,复制即可运行。

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

<!DOCTYPE html>

<html dir="ltr">

<head>

<meta charset="utf-8" />

<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="author" content="webhivers" />

<meta name="format-detection" content="telephone=no">

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_695050_qf5jdjknto.css">

<title>arrow-right</title>

<style>

    .container { width: 1000px;margin: 0 auto; }

    @keyframes move {

      0% {left: 0%;     opacity: 0; }

      70% { left: 70%; opacity: 1 }

      100% {left: 100%;opacity: 0;}

    }        

    .move{-webkit-animation-name:move;animation-name:move;position:relative;margin-left:-16px;}

    .ar-animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;font-style:inherit;-webkit-animation-timing-function:linear;animation-timing-function:linear;}

    .ar-delay-1s{animation-delay:0.1s;}

    .ar-delay-2s{animation-delay:0.2s;}

    .ar-delay-3s{animation-delay:0.3s;}

    .ar-delay-4s{animation-delay:0.4s;}

    .ar-delay-5s{animation-delay:0.5s;}

    .ar-delay-6s{animation-delay:0.6s;}

    .ar-delay-7s{animation-delay:0.7s;}

    .ar-delay-8s{animation-delay:0.8s;}

    .ar-delay-9s{animation-delay:0.9s;}

    .ar-delay-10s{animation-delay:0.10s;}

      

</style>

  

  

</head>

  

<body>

  

<!-- Wrapper -->

<div>

  

    <!-- Header -->

    <header id="header"></header>

    <!-- #Header end -->

  

  

    <!-- Content -->

    <section id="content">

  

        <div>

  

            <div>

  

                <!-- HTML CODE HERE -->

  

                <div>

                    <!-- <span class="move animated">>>>>>></span> -->

                    <span style="width:35px;display: block">

                        <!-- <i class="move animated delay-7s iconfont icon-arrow-right"></i>

                        <i class="move animated delay-6s iconfont icon-arrow-right"></i>

                        <i class="move animated delay-5s iconfont icon-arrow-right"></i> -->

                        <i class="move ar-animated ar-delay-4s iconfont icon-arrow-right"></i>

                        <i class="move ar-animated ar-delay-3s iconfont icon-arrow-right"></i>

                        <i class="move ar-animated ar-delay-2s iconfont icon-arrow-right"></i>

                        <i class="move ar-animated ar-delay-1s iconfont icon-arrow-right"></i>

                        <i class="move ar-animated iconfont icon-arrow-right"></i>

                    </span>

                </div>

  

            </div>

  

        </div>

  

    </section>

    <!-- #Content end -->

  

  

    <!-- Footer -->

    <footer id="footer"></footer>

    <!-- #Footer end -->

  

  

</div>

<!-- #Wrapper end -->

</body>

</html>

Salin selepas log masuk

 相关推荐:

css3的动画(animation)属性的详解(附代码)

怎么用css制作箭头?(不同方向箭头代码示例)

Atas ialah kandungan terperinci css3中animation属性实现箭头向右滚动渐隐的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan