固定位置悬浮效果

by 亮 薛

HTML

<div id="container">
  <a href="#" class="btn">头条新闻</a>
  <a href="#" class="btn">头条新闻</a>
</div>

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

body {
  height: 300px;
}

#container {
  width: 62px;
  position: fixed;
  right: 0;
  top: 100px;
}

#container .btn {
  color: rgb(102, 102, 102);
  cursor: pointer;
  display: block;
  height: 30px;
  text-align: center;
  text-decoration: none solid rgb(102, 102, 102);
  width: 60px;
  column-rule-color: rgb(102, 102, 102);
  perspective-origin: 31px 16px;
  transform-origin: 31px 16px;
  caret-color: rgb(102, 102, 102);
  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 1px solid rgb(206, 206, 206);
  font: normal normal normal normal 12px / 30px arial, "Hiragino Sans GB", "Hiragino Sans GB W3", 宋体;
  margin: 0px 0px 4px;
  outline: rgb(102, 102, 102) none 0px;
}