首頁 > web前端 > H5教程 > 2014年聖誕節倒數網頁的製作流程_html5教學技巧

2014年聖誕節倒數網頁的製作流程_html5教學技巧

WBOY
發布: 2016-05-16 15:47:07
原創
1564 人瀏覽過

  2014年的聖誕節即將來臨之季。愛編程小編跟大家分享一款2014年聖誕節倒數網頁,當天的日期卡有抖動的效果。一起看下效果圖:

  滑鼠點擊5號前

  滑鼠點擊5號後

  實作的程式碼。

  html代碼:

XML/HTML Code複製內容到剪貼簿
  1. h1>  
  2.         聖誕快樂h1>h1
  3. >
  4. h1>    ul
  5. >
  6.           li
  7. > 🎜>> 🎜>>              div >
  8.                    1div
  9. div        li> 🎜>
  10. >
  11.  🎜>>          li
  12. > 🎜>> 🎜>>              div >
  13.                    2div        
  14. li> 🎜>> 🎜>>
  15.           li> 🎜>
  16. >
  17.  🎜>>              div 🎜>>  
  18.                 3
  19. div        li
  20. >
  21.  🎜>> 🎜>>          
  22. li> 🎜>> 🎜>> 
  23.             div 🎜>>                   4div
  24.         li> 🎜>>
  25.  🎜>
  26. >          
  27. li>
  28.  🎜>> 🎜>> 
  29.             div 🎜>>                   5div
  30.         li> 🎜>>
  31.  🎜>
  32. >          
  33. li>
  34.  🎜>> 🎜>>              
  35. div 🎜>>                   6div        
  36. li
  37. > 🎜>> 🎜>> 
  38.         
  39. li> 🎜>> 🎜>
  40. >
  41.               div 🎜>>
  42.                    7div        li> 🎜>
  43. >
  44.  🎜>>          li
  45. > 🎜>> 🎜>>              
  46. div 🎜>>  
  47.                 8
  48. div        li> 🎜>> 🎜>>
  49.  
  50.         li> 🎜>>
  51.  🎜>>              div
  52.  🎜>
  53. >                   9div
  54.         li> 🎜>> 🎜>> 
  55.         li> 🎜>>
  56.  🎜>>              div 🎜>>                   10
  57. divdivdiv
  58. divdivdiv
  59.         li>
  60.  🎜>> 🎜>>          li> 🎜>>
  61.  🎜>
  62. >              div 🎜>
  63. >
  64.                    11div
  65. divdivdiv
  66. div        li> 🎜>> 🎜>>
  67.  
  68.         li> 🎜>>
  69.  🎜>>              div
  70.  🎜>
  71. >                   12div
  72. divdivdivdiv
  73.         li> 🎜>>
  74.  🎜>
  75. >          li>
  76.  🎜>> 🎜>>              
  77. div 🎜>>                   13divdiv
  78. divdivdiv
  79. divdiv        li> 🎜>> 🎜>>          li> 🎜>> 🎜>>              div 🎜>>                   14divdivdivdivdivdivdiv        li> 🎜>>
  80.  🎜>>          li
  81. >
  82.  🎜>> 🎜>>              div 🎜>>  
  83.                 15divdiv
  84. divdivdiv
  85. divdivdiv
  86.         li> 🎜>> 🎜>> 
  87.         li> 🎜>>
  88.  🎜>
  89. >              div 🎜>
  90. >
  91.                    16div
  92. divdivdivdivdiv
  93. divdiv
  94.         
  95. li> 🎜>> 🎜>
  96. >
  97.           li>
  98.  🎜>
  99. > 🎜>>              div 🎜>>  
  100.                 17divdiv
  101. divdivdiv
  102. divdiv        
  103. li> 🎜>> 🎜>>          li
  104. > 🎜>> 🎜>>              div 🎜>>                   18divdivdivdivdiv        li> 🎜>> 🎜>>          li> 🎜>> 🎜>>              div 🎜>>  
  105.                 19divdiv
  106. divdivdiv
  107.         li>
  108.  🎜>
  109. > 🎜>>          li> 🎜>> 🎜>
  110. >
  111.               div 🎜>>
  112.                    20div
  113. divdivdiv
  114.         li> 🎜>> 🎜>>          
  115. li> 🎜>> 🎜>>
  116.               div 🎜>>
  117.   
  118.                 21div
  119. div
  120. divdivdivdiv
  121. div
  122.         li
  123. >
  124.  🎜>> 🎜>>          
  125. li> 🎜>> 🎜>> 
  126.             div 🎜>>                   22div
  127. divdivdiv
  128. divdiv
  129.         li> 🎜>>
  130.  🎜>>          li> 🎜>> 🎜>>              div 🎜>>                   23divdivdivdivdivdiv        li> 🎜>> 🎜>>          li> 🎜>> 🎜>> 
  131.             div 🎜>>                   24div
  132. divdivdiv
  133. divdivdiv
  134.         li>
  135.  🎜>> 🎜>>          li> 🎜>>
  136.  🎜>
  137. >              div 🎜>
  138. >
  139.                    25div
  140. divdivdiv
  141. divdivdiv        
  142. li
  143. > 🎜>> 🎜>> 
  144.     

ul>

  
    
p id id id id id id>留言🎜>>       p>   css3代碼: C/C 代碼將內容複製到剪貼簿
  1. 身體{   
  2.   背景: url("xmas.jpg");   
  3.   顏色:#fff;   
  4.   字體系列: 'Oleo Script',草書;   
  5.   內邊距:20px;   
  6.   字體粗細:400;   
  7. }   
  8.   
  9. h1 {   
  10.   邊距:0;   
  11.   字體大小:75px;   
  12.   高:75px;  
  13.   文字對齊:居中;   
  14.   字體粗細:400;   
  15. }   
  16.   
  17. ul {   
  18.   邊距:0 自動 30px 自動;  
  19.   填充:0;   
  20.   列表樣式類型:無;   
  21.   最大寬度:900px;   
  22.   寬度:100%;   
  23.   文字對齊:居中;   
  24.   使用者選擇:無;   
  25. }   
  26.   
  27. 李{   
  28.   字體粗細:400;   
  29.   背景顏色:#fff;   
  30.   box-sizing:邊框框;   
  31.   邊框半徑:6px;   
  32.   顯示:內聯-塊;   
  33.   顏色:#111;   
  34.   遊標:指針;   
  35.   字體大小:26px;   
  36.   內邊距:15px;   
  37.   邊距:25px 12px;   
  38.   寬度:130px;   
  39.   高度:130px;   
  40.   行高:100px;   
  41.   文字對齊:居中;   
  42.   職位:親屬;   
  43.   垂直對齊:上;   
  44.   使用者選擇:無;   
  45.   視角:800 像素;   
  46.   轉換:全部 0.4 秒緩入;   
  47. }   
  48.   
  49. ul li:最後一個孩子 {   
  50.   
  51.   背景尺寸:封面;     
  52.   顯示:塊;   
  53.   明確:兩者;   
  54.   邊距: 20px 自動 0 自動;   
  55.   寬度:200px;   
  56.    高度:275 像素;  
  57. }   
  58.   
  59. ul li:last-child .door {   
  60.   字體大小:100px;   
  61.   寬度:200px;   
  62.   高度:275px;   
  63.   高:240px;  
  64. }  
  65. ul li:last-child .revealed {
  66. 行の高さ: 123px;   
  67. }
  68. .door {
  69. ユーザー選択: なし。   
  70. カラー:#fff;   
  71. font-size: 70px;   
  72. 位置: 絶対。   
  73. トップ:0;   
  74. 左:0;   
  75. 背景色: #91c1cc;   
  76. box-sizing: border-box;   
  77. border-top: 2px #eee 破線;   
  78. border-right: 2px #eee 破線;   
  79. border-bottom: 2px #eee 破線;   
  80. border-left: 1px #eee solid;   
  81. border-radius: 6px;   
  82. パディング:15px;   
  83. 幅: 130ピクセル;   
  84. 高さ:130px;   
  85. 変換元: 0 40%;    
  86. トランジション: すべて 0.4 秒 イーズインアウト。   
  87. transform-style: preserve-3d;   
  88. }
  89. .current .door {
  90. 背景色: #7EAD44;   
  91. }
  92. .current .door.open{
  93. カラー: #7EAD44;   
  94. }
  95. .revealed {
  96. ユーザー選択: なし。   
  97. }
  98. #message {
  99. box-sizing: border-box;   
  100. カラー: #222;   
  101. 表示: なし。   
  102. font-size: 24px;   
  103. パディング: 20px;   
  104. 背景: #eddecb;   
  105. 最大幅: 500ピクセル;   
  106. 幅: 100%;   
  107. border-radius: 15px;   
  108. マージン: 0 自動;   
  109. }
  110. .open {
  111. box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);   
  112. カラー: #91c1cc;   
  113. transform: rotate3d(0, 1, 0, -98deg);   
  114. }
  115. .jiggle {
  116. アニメーション: 揺れ 0.2秒 無限;   
  117. 変換: 回転(-1度);   
  118. }
  119. @keyframes jiggle {
  120. 0% {
  121. transform: rotate(-1deg);   
  122. }  
  123. 50% {
  124. transform: rotate(1deg);   
  125. }
  126. }
  127. @media screen and (min-width: 480px) {
  128. li {
  129. マージン:25px 20px;   
  130. }
  131. }
  132. @media screen and (min-width: 768px) {
  133. ボディ {
  134. background-size:150px;   
  135. }
  136. p {
  137. 右: 6%;   
  138. トップ: 20%;   
  139. 下: 自動;    
  140. margin-left: auto;   
  141. 左: 自動;   
  142. }
  143. }
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板