使用CSS3怎么實現一個時間軸效果

這篇文章將為大家詳細講解有關使用CSS3怎么實現一個時間軸效果 ，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

HTML結構：

XML/HTML Code復制內容到剪貼板

1. <div class="timezone">  

2.             <div class="time">  

3.                 <h3>2015-07-02</h3>  

4.                 <div>  

5.                     <p>暴走大事件第一季</p>  

6.                     <ul>  

7.   

8.                     </ul>  

9.                 </div>  

10.             </div>  

11.             <div class="timeLeft" style="top: 100px;">  

12.                 <h3>2015-07-02</h3>  

13.                 <div>  

14.                     <p>暴走大事件第二季</p>  

15.                     <ul>  

16.   

17.                     </ul>  

18.                 </div>  

19. </div>    

20.   

這里簡化了一下HTML結構，.time類表示在右邊，.timeLeft表示在左邊，然后加點上外邊距就可以了，每一塊里面的內容我就刪減掉了。
 
CSS樣式代碼如下：

CSS Code復制內容到剪貼板

1. body{   

2.                 background: #333;   

3.             }   

4.             h2{   

5.                 text-align: center;   

6.                 color:#fff;   

7.             }   

8.             .timezone{   

9.                 width:6px;   

10.                 height: 350px;   

11.                 background: lightblue;   

12.                 margin: 0 auto;   

13.                 margin-top:50px;   

14.                 border-radius: 3px;   

15.                 position: relative;   

16.                 -webkit-animation: heightSlide 2s linear;   

17.             }   

18.             @-webkit-keyframes heightSlide{   

19.                 0%{   

20.                     height: 0;   

21.                 }   

22.                 100%{   

23.                     height: 350px;   

24.                 }   

25.             }   

26.             .timezone:after{   

27.                 content: '未完待續...';   

28.                 width: 100px;   

29.                 color:#fff;   

30.                 position: absolute;   

31.                 margin-left: -35px;   

32.                 bottombottom: -30px;   

33.                 -webkit-animation: showIn 4s ease;   

34.             }   

35.             .timezone .time,.timezone .timeLeft{   

36.                 position: absolute;   

37.                 margin-left: -10px;   

38.                 margin-top:-10px;   

39.                 width:20px;   

40.                 height:20px;   

41.                 border-radius: 50%;   

42.                 border:4px solid rgba(255,255,255,0.5);   

43.                 background: lightblue;   

44.                 -webkit-transition: all 0.5s;   

45.                 -webkit-animation: showIn ease;   

46.             }   

47.             .timezone .time:nth-child(1){   

48.                 -webkit-animation-duration:1s;   

49.             }   

50.             .timezone .timeLeft:nth-child(2){   

51.                 -webkit-animation-duration:1.5s;   

52.             }   

53.             .timezone .time:nth-child(3){   

54.                 -webkit-animation-duration:2s;   

55.             }   

56.             .timezone .timeLeft:nth-child(4){   

57.                 -webkit-animation-duration:2.5s;   

58.             }   

59.             @-webkit-keyframes showIn{   

60.                 0%,70%{   

61.                     opacity: 0;   

62.                 }   

63.                 100%{   

64.                     opacity: 1;   

65.                 }   

66.             }   

67.             .timezone .time h3,.timezone .timeLeft h3{   

68.                 position: absolute;   

69.                 margin-left: -120px;   

70.                 margin-top: 3px;   

71.                 color:#eee;   

72.                 font-size: 14px;   

73.                 cursor:pointer;   

74.                 -webkit-animation: showIn 3s ease;   

75.             }   

76.             .timezone .timeLeft h3{   

77.                 margin-left: 60px;   

78.                 width: 100px;   

79.             }   

80.             .timezone .time:hover,.timezone .timeLeft:hover{   

81.                 border:4px solid lightblue;   

82.                 background: lemonchiffon;   

83.                 box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);   

84.             }   

85.             .timezone .time div,.timezone .timeLeft div{   

86.                 position: absolute;   

87.                 top:50%;   

88.                 margin-top: -25px;   

89.                 left:50px;   

90.                 width: 300px;   

91.                 height: 50px;   

92.                 background: lightblue;   

93.                 border:3px solid #eee;   

94.                 border-radius: 10px;   

95.                 z-index: 2;   

96.                 overflow: hidden;   

97.                 cursor:pointer;   

98.                 -webkit-animation: showIn 3s ease;   

99.                 -webkit-transition: all 0.5s;   

100.             }   

101.             .timezone .timeLeft div{   

102.                 left:-337px;   

103.             }   

104.             .timezone .time div:hover,.timezone .timeLeft div:hover{   

105.                 height: 170px;   

106.             }   

107.             .timezone .time div p,.timezone .timeLeft div p{   

108.                 color: #fff;   

109.                 font-weight: bold;   

110.                 text-align: center;   

111.             }   

112.             .timezone .time:before,.timezone .timeLeft:before{   

113.                 content: '';   

114.                 position: absolute;   

115.                 top:0px;   

116.                 left: 32px;   

117.                 width: 0px;   

118.                 height: 0px;   

119.                 border:10px solid transparent;   

120.                 border-right:10px solid #eee;   

121.                 z-index:-1;   

122.                 -webkit-animation: showIn 3s ease;   

123.             }   

124.             .timezone .timeLeft:before{   

125.                 left:-33px;   

126.                 border:10px solid transparent;   

127.                 border-left:10px solid #eee;   

128.             }   

129.             .timezone .time div ul,.timezone .timeLeft div ul{   

130.                 list-style: none;   

131.                 width:300px;   

132.                 padding:5px 0 0;   

133.                 border-top:2px solid #eee;   

134.                 color:#fff;   

135.                 text-align: center;   

136.             }   

137.             .timezone .time div li,.timezone .timeLeft div li{   

138.                 display: inline-block;   

139.                 height: 25px;   

140.                 line-height: 25px;   

141.             }    

142.   

關于使用CSS3怎么實現一個時間軸效果 就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。