CSS3制作购物车下拉列表

这个案例主要展示的是使用CSS3实现一个购物车清单下拉列表的效果,在整个效果制作过程中没有过多的技术难题,主要一点是使...



这个案例主要展示的是使用CSS3实现一个购物车清单下拉列表的效果,在整个效果制作过程中没有过多的技术难题,主要一点是使用什么方法来实现下拉列表的隐藏与显示效果,在本例中还是通过max-height来实现的,至于其他的效果,我想大家要是一路跟着藤藤走下来了的话都非常熟悉了,如果你没有跟着练习也不用害怕,这些效果无外呼包括了gradient制作渐变、box-shadow制作阴影,@font-face实现icon等等。

HTML CODE

  1. <ul class="clearfix">
  2.   <li>
  3.     <a href="#" class="cart"><em>2</em></a>
  4.       <div class="item">
  5.         <ul>
  6.           <li>
  7.              Your Products (2 items)<a href="#" class="checkout">Checkout</a>
  8.           </li>
  9.           <li>
  10.             <a class="items">
  11.               <div class="items_img"><img src="img/mac.png"></div>
  12.               <div class="items_text"><span>MacBook Pro 13-inch<span><em>$1,199</em></div>
  13.             </a>
  14.           </li>
  15.           <li>
  16.             <a class="items">
  17.               <div class="items_img"><img src="img/iphone.png"></div>
  18.               <div class="items_text"><span>MacBook Pro 13-inch</span><em>$1,199</em></div>
  19.             </a>
  20.           </li>
  21.         </ul>
  22.       </div>
  23.    </li>
  24. </ul>
复制代码
CSS CODE

  1. body {
  2. background-color:#282828;
  3. }
  4. .demo {
  5. margin:40px auto 0;
  6. width: 680px;
  7. height: 400px;
  8. background-color:#f2f2f2;
  9. }
  10. .demo > ul:nth-child(1){
  11. position: relative;
  12. height: 60px;
  13. box-shadow: 0 1px 3px rgba(0,0,0,.4);
  14. background: -webkit-linear-gradient(top,#ddeef0,#c3e1e5);
  15. background: -moz-linear-gradient(top,#ddeef0,#c3e1e5);
  16. background: -o-linear-gradient(top,#ddeef0,#c3e1e5);
  17. background: -ms-linear-gradient(top,#ddeef0,#c3e1e5);
  18. background: linear-gradient(top,#ddeef0,#c3e1e5);
  19. }
  20. .demo > ul:nth-child(1):after {
  21. position: absolute;
  22. content: "";
  23. bottom: 3px;
  24. display: block;
  25. width: 100%;
  26. height: 1px;
  27. border-bottom: 1px dashed #fff;
  28. }
  29. .cart {
  30. position: absolute;
  31. left:50%;
  32. top:15px;
  33. display: block;
  34. width: 36px;
  35. height: 30px;
  36. text-align: center;
  37. color: #728f93;
  38. border: 1px solid #a7bdc0;
  39. border-radius: 3px;
  40. box-shadow: 0 1px 0 #e6f3f4 inset,0 1px 0 #ddeef0;
  41. }
  42. .cart em {
  43. position: absolute;
  44. top:-5px;
  45. right:-5px;
  46. font-style: normal;
  47. display: inline-block;
  48. width: 14px;
  49. height: 14px;
  50. border-radius: 7px;
  51. border: 1px solid #856045;
  52. background-color: #bb815c;
  53. content: "2";
  54. color: #fff;
  55. line-height: 14px;
  56. font-size: 10px;
  57. }
  58. .cart:after {
  59. display: inline-block;
  60. font-size: 20px;
  61. font-family: 'broccolidry';
  62. font-style: normal;
  63. font-weight: normal;
  64. speak: none;
  65. -webkit-font-smoothing: antialiased;
  66. content: "\21";
  67. text-shadow: 0 1px 0 #d6eaec;
  68. line-height: 30px;
  69. }
  70. .item {
  71. position: absolute;
  72. left: 85px;
  73. top: 50px;
  74. width: 320px;
  75. z-index: 100;
  76. max-height: 0px;
  77. overflow: hidden;
  78. -webkit-transition: max-height 0.4s linear;
  79. -moz-transition: max-height 0.4s linear;
  80. -o-transition: max-height 0.4s linear;
  81. -ms-transition: max-height 0.4s linear;
  82. transition: max-height 0.4s linear;
  83. }
  84. .demo > ul > li:hover .item {
  85. max-height: 220px;
  86. }
  87. .item ul {
  88. margin-top: 5px;
  89. text-shadow: 0 1px 0 #fff;
  90. border: 1px solid #a8b1b6;
  91. box-shadow: 0 0 7px rgba(0,0,0,.3),0 1px 0 #ced3d6,0 2px 0 #9ba4a8,0 3px 0 #cbd0d4,0 4px #9aa3a8,0 5px 5px #cfd0d0;
  92. border-radius: 5px 5px  0 0;
  93. background-color: #eaeff3;
  94. }
  95. .item ul li {
  96. line-height: 60px;
  97. max-height: 60px;
  98. border-top: 1px solid #a8b0b6;
  99. box-shadow: 0 1px 0 #fff inset;
  100. }
  101. .item li:nth-child(1) {
  102. color: #fff;
  103. font-size: 16px;
  104. text-shadow: 0 1px 0 rgba(0,0,0,.4);
  105. padding: 0 5px;
  106. box-shadow: none;
  107. border-radius: 3px 3px 0 0;
  108. border: 1px solid #667078;
  109. background: -webkit-linear-gradient(top,#7f8d97,#6e7c87);
  110. background: -moz-linear-gradient(top,#7f8d97,#6e7c87);
  111. background: -o-linear-gradient(top,#7f8d97,#6e7c87);
  112. background: -mslinear-gradient(top,#7f8d97,#6e7c87);
  113. background: linear-gradient(top,#7f8d97,#6e7c87);
  114. }
  115. .item li:nth-child(1):before {
  116. position: absolute;
  117. content: '';
  118. width: 1px;
  119. height: 1px;
  120. right: 40px;
  121. top: -5px;
  122. margin-left: -5px;
  123. border: 6px solid transparent;
  124. border-bottom-color: #7f8d97;
  125. z-index: 99;
  126. }
  127. .item li:nth-child(1):after {
  128. position:relative;
  129. display: block;
  130. bottom: 3px;
  131. content: "";
  132. width: 100%;
  133. height: 1px;
  134. border-bottom: 1px dashed #fff;
  135. }
  136. .item li:nth-child(1) .checkout {
  137. float: right;
  138. color: #fff;
  139. text-shadow:0 1px 0 #8e4524;
  140. padding: 0 5px;
  141. height: 28px;
  142. line-height: 28px;
  143. margin-top: 14px;
  144. border-radius: 5px;
  145. border :1px solid #81634d;
  146. box-shadow: 0 0 3px #a16844 inset,0 1px 0 #8d99a1;
  147. background-color: #c58f6a;
  148. }
  149. .item li .checkout:hover {
  150. text-decoration: none;
  151. box-shadow: 0 0 3px #a76f4b inset,0 1px 0 #949fa6;
  152. background-color: #cb9876;
  153. }
  154. .items {
  155. display: block;
  156. color: #78838a;
  157. padding: 0 5px;
  158. }
  159. .items:hover {
  160. color: #78838a;
  161. text-decoration: none;
  162. background-color: #fff;
  163. }
  164. .items .items_img {
  165. float: left;
  166. width: 60px;
  167. height: 60px;
  168. }
  169. .items .items_img img {
  170. width: 58px;
  171. height: 58px;
  172. vertical-align: middle;
  173. }
  174. .items_text {
  175. margin-left: 30px;
  176. overflow: hidden;
  177. }
  178. .items_text em {
  179. font-weight: bold;
  180. color: #82593c;
  181. float: right;
  182. }
  183. @font-face {
  184. font-family: 'broccolidry';
  185. src:url('fonts/broccolidry.eot');
  186. src:url('fonts/broccolidry.eot?#iefix') format('embedded-opentype'),
  187.      url('fonts/broccolidry.svg#broccolidry') format('svg'),
  188.      url('fonts/broccolidry.woff') format('woff'),
  189.      url('fonts/broccolidry.ttf') format('truetype');
  190. font-weight: normal;
  191. font-style: normal;
  192. }
复制代码
DEMO:http://www.w3cplus.com/demo/css3/CartDropdown/index.html

下载:




原文:http://www.w3cplus.com/demo/cart-dropdown-list.html


标签: cssbackground