之前寫的純HTML+css 的懸浮

時間 2019-11-16

標籤之前寫的 html+css html css 懸浮欄目 CSS 简体版

原文原文鏈接

一個純HTML+css完成的懸浮

主要用到了css3的一些東西，包括transition過渡、transform轉換，transform中包含translate、rotate（旋轉）、scale（放大）、matrix（翻轉）等屬性，這裏只用到了translate屬性，窗口固定fixed，還使用僞類hover完成，以及利用僞類after的border屬性畫三角形的小例子，還用到了漸變色linear-gradient 的屬性。css

其中css3中的許多屬性都會涉及到兼容性的問題，如transition、transform、linear-gradient都會有不一樣內核不兼容的問題，處理css3 這方面的兼容性問題多些幾條不一樣瀏覽器的寫法就行；html

safari 是 Webkit內核，chrome瀏覽器Webkit內核，如今是Blink內核 -webkit- ；firefox瀏覽器 Gecko內核，俗稱Firefox內核 -moz- ；ie內核， Trident內核 -ms- ； Opera 最初是本身的Presto內核，後來是Webkit，如今是Blink內核 -o- ；css3

代碼還不夠完善，由於這是以前寫的，有不少細節沒完善號，兼容都沒寫完，如今想還能夠用js把回到頂部作成滑動的；web

下面是代碼：chrome

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>xuanfu</title>
  6     <!--<link rel="stylesheet" href="" type="text/css">-->
  7     <style type="text/css">
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         .all {
 14             position: fixed;  /*窗口固定定位*/
 15             right: 0px;
 16             top: 70%;
 17             width: 60px;
 18             margin-top: -90px;
 19             z-index: 999;
 20             box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);  /*陰影*/
 21         }
 22 
 23         .all ul {
 24             list-style: none;
 25         }
 26 
 27         .all ul li {
 28             width: 60px;
 29             width: 60px;
 30             height: 60px;
 31             line-height: 60px;
 32             position: relative; /*相對*/
 33             border-bottom: 1px solid #FFFFFF;
 34             z-index: 2;
 35         }
 36 
 37         .all ul li a {
 38             position: absolute;  /*絕對*/
 39             top: 0px;
 40             left: 0px;
 41             display: block;
 42             color: #FFFFFF;
 43             width: 60px;
 44             height: 60px;
 45             line-height: 60px;
 46             z-index: 2;
 47             text-decoration: none;  /*下劃線樣式*/
 48             -webkit-transition: all 0.6s;
 49             -ms-transition: all 0.6s;
 50             -moz-transition: all 0.6s;
 51         }
 52 
 53         .all ul li a img {
 54             width: 30px;
 55             position: absolute;
 56             top: 15px;
 57             left: 15px;
 58             z-index: 2;
 59         }
 60 
 61         .all-title {
 62             position: absolute;
 63             left: 0px;
 64             bottom: 1px;
 65             width: 80px;
 66             height: 40px;
 67             line-height: 40px;
 68             text-align: center;
 69             color: white;
 70             -webkit-transition: all 0.6s; /*2d3d轉換*/
 71             -ms-transition: all 0.6s;
 72             -moz-transition: all 0.6s;
 73             background-color: white;
 74             box-shadow: 0px 0px 10px rgba(0,0,0,0.5);  /*陰影*/
 75             z-index: 1;
 76             opacity: 0;  /*不透明度*/
 77         }
 78 
 79         .all-title:before { /*在這以前插入，內容爲小尖角*/
 80             position: absolute;
 81             display: block;
 82             width: 10px;
 83             height: 10px;
 84             content: '';
 85             right: -5px;
 86             top: 14px;
 87             background-color: white;
 88             -webkit-transform: rotate(45deg);
 89         }
 90 
 91         .all li:hover .all-title {
 92             left: -88px;
 93             opacity: 1;
 94         }
 95 
 96         li a {
 97             background-image: -webkit-linear-gradient(left, #f60, #ffb443);
 98             background-image: -moz-linear-gradient(left, #f60, #ffb443);
 99             background-image: -ms-linear-gradient(left, #f60, #ffb443);
100         }
101 
102         .all-title {
103             background-color: #f60;
104         }
105 
106         .all-title:before {
107             background-color: #f60;
108         }
109 
110         li.wuyou-contact a {
111             background-image: -webkit-linear-gradient(left, #00b7ee, #55d8ff);
112             background-image: -moz-linear-gradient(left, #00b7ee, #55d8ff);
113             background-image: -ms-linear-gradient(left, #00b7ee, #55d8ff);
114         }
115 
116         li.wuyou-contact .all-title {
117             background-color: #00b7ee;
118         }
119 
120         li.wuyou-contact .all-title:before {
121             background-color: #00b7ee;
122         }
123 
124         li.wuyou-top a {
125             background-image: -webkit-linear-gradient(left, #333, #666);
126             background-image: -moz-linear-gradient(left, #333, #666);
127             background-image: -ms-linear-gradient(left, #333, #666);
128         }
129 
130         li.wuyou-top .all-title {
131             background-color: #333;
132         }
133 
134         li.wuyou-top .all-title:before {
135             background-color: #333;
136         }
137 
138     </style>
139 </head>
140 <body style="height: 2000px">
141 <div class="all">
142     <ul>
143         <li>
144             <a href="#"><img src="img/taobao.png" alt="" ></a>
145             <div class="all-title">淘寶官網</div>
146         </li>
147         <li class="wuyou-contact">
148             <a href="#"><img src="img/aliwangwang.png" alt="" ></a>
149             <div class="all-title">聯繫客服</div>
150         </li>
151         <li class="wuyou-top">
152             <a href="#"><img src="img/vertical-align-top.png" alt="" ></a>
153             <div class="all-title">回到頂部</div>
154         </li>
155     </ul>
156 </div>
157 
158 </body>
159 </html>

Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。