1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/***噗寶收至下方***/
footer::after {
  content: '';
  position: fixed;
  bottom: 0;
  z-index: 10000;
  width: 100%;
  height: 0px;
  background-color: pink; /*背景色*/
  background-image: /*圖片網址*/
    url(https://s.plurk.com/creatures/big/20d93c8a68a501b2c6d3.png),
    url(https://s.plurk.com/creatures/big/20d93c8a68a501b2c6d3.png),
    url(https://s.plurk.com/creatures/big/20d93c8a68a501b2c6d3.png),
    url(https://s.plurk.com/creatures/big/20d93c8a68a501b2c6d3.png);
  background-position: /*圖片位置 - 離左邊距離 離上面距離*/
    50px 50px,
    250px 10px,
    300px 0px,
    400px 5px;
  background-repeat: no-repeat;
  transition: height 1s;
}
footer:hover::after {
  height: 500px; /*拉上的高度*/
}
/*隱藏footer*/
#footer {
  display: none;
}
/*上拉噗寶*/
footer::before {
  content: '';
  display: block;
  position: fixed;
  bottom: 0;
  left: 50px; /*位置*/
  width: 150px; /*大小*/
  height: 150px;
  /*圖片網址*/
  background: url(https://s.plurk.com/creatures/big/20d93c8a68a501b2c6d3.png) center/contain no-repeat;
}