首頁 > web前端 > css教學 > css3中animation屬性實作箭頭向右滾動漸隱的程式碼

css3中animation屬性實作箭頭向右滾動漸隱的程式碼

不言
發布: 2018-08-10 11:42:56
原創
3252 人瀏覽過

這篇文章要跟大家介紹的內容是關於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>

登入後複製

 相關推薦:

css3的動畫(animation)屬性的詳解(附程式碼)

怎麼用css製作箭頭? (不同方向箭頭程式碼範例)

以上是css3中animation屬性實作箭頭向右滾動漸隱的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板