注意：在您儲存之後您必須清除瀏覽器快取才可看到最新的變動。
?_=1來訪問最新頁面。
#box1{position: relative;}
#box2,#box3{background-image: url(http://i0.hdslb.com/bfs/new_dyn/4631f5ecbb38d13bf739c3c8f21136fe100362242.png);background-repeat: no-repeat;background-size: 100%;width: 60px;height: 30px;position: absolute;opacity: 0;}
@keyframes yundongfan {50%{left: 0px;}100%{left: -30;}}
@keyframes yundongzheng {50%{right: 0px;}100%{right: -30px;}}
#box1:hover #box2{opacity: 1;transition:0.5s;animation: yundongzheng 1.5s;}
#box1:hover #box3{opacity: 1;transition:0.5s;animation: yundongfan 1.5s;}
#box2{bottom: 0;right: -30px;}
#box3{transform: rotateY(180deg);top: 0px;left: -30px;}