过渡背景图background-position属性动态切换菜单

实现效果如下：

<style>
  .container { width: 476px; margin: 0 auto; }
  ul { padding: 20px 0 0 0 ; margin-top: 50px; width: 100%; border-top: 1px dashed #e0e0e0; border-bottom: 1px solid #aaa; }
  li { display: inline-block; margin-left: 40px; cursor: pointer; }
  li a { display: block; width: 60px; height: 60px; padding: 20px; border-radius: 15px; border: 1px dotted #ce0500; }
  li:hover a { border: 1px dotted #696969; }

  li a span { display: block; width: 100%; height: 100%; background:url(img/test/icon1.png) no-repeat bottom center; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3; transition: background 0.3; }
  li:hover a span{ background-position:top center; }

  li p { font-size: 18px; color: #ce0500; text-align: center; margin-top: 15px; }
  li:hover p{ color:#333; }
  li strong { display: block; position: relative; width: 100%; margin-top: 15px; border-bottom: none; }
  li:hover strong {border-bottom: 1px solid #ce0500; }

  li:hover strong i{ display: block; }
  li i { display: none; position: absolute; width: 0; height: 0; left: 50%; margin-left: -9px; border: 10px solid transparent; border-top-color: #ce0500; }
</style>

html

<div class="container">
            <ul class="li_list">
                
                <li>
                    <a>
                        <span></span>
                    </a>
                    <p>我的素材</p>
                    <strong>
                        <i></i>
                    </strong>
                </li>
                <li>
                    <a>
                        <span style="background-image:url(img/test/icon2.png);"></span>
                    </a>
                    <p>我的相册</p>
                    <strong>
                        <i></i>
                    </strong>
                </li>
                <li>
                    <a>
                        <span style="background-image:url(img/test/icon3.png);"></span>
                    </a>
                    <p>我的焦点</p>
                    <strong>
                        <i></i>
                    </strong>
                </li>
            </ul>
        </div>