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
42
/***噗寶收至上方***/
#dynamic_logo {
  top: 0;
  left: 0;
  right: auto;
  margin-top: 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;
}
#dynamic_logo:hover {
  height: 200px; /*拉下的高度*/
}
/*隱藏原始噗寶*/
#dynamic_logo img {
  display: none;
}
/*下拉噗寶*/
#dynamic_logo::before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 50px; /*位置*/
  width: 150px; /*大小*/
  height: 150px;
  /*圖片網址*/
  background: url(https://s.plurk.com/creatures/big/20d93c8a68a501b2c6d3.png) center/contain no-repeat;
}