xinyi/application/index/view/Index/icon.html

<div class="icon_group">
    <ul>
        <li><a href="{:url('/index/index/index')}"><img class="stroke_border" style="margin-top: 15%;margin-left: 22%; width: 1.2rem;height: 1.2rem;"  src="/static/index/images/nav_icon1.png"/></a></li>
        <li><a href="{:url('/index/index/commodity')}"><img class="stroke_border" style="margin-top: 20%;margin-left: 20%;width: 1.2rem;height: 1.2rem;"  src="/static/index/images/nav_icon2.png"/></a></li>
        <li><a href="{:url('/index/index/car')}"><img class="stroke_border" style="margin-left: 20.5%;margin-top: 18%;width: 1.2rem;height: 1.2rem;" src="/static/index/images/nav_icon3.png"/></a></li>
        <li><a href="{:url('/index/index/center')}"><img class="stroke_border" style=" margin-left: 21%;margin-top: 15%;width: 1.2rem;height: 1.2rem;"  src="/static/index/images/nav_icon4.png"/></a></li>
        <li class="show22">
            <img class="stroke_border" style="margin-left: -24%;margin-top: -22%;" src="/static/images/show_icon.png"></li>
        <li class="hide22">
            <img class="stroke_border" style="margin-left: -24%;margin-top: -22%;" src="/static/images/hidden_icon.png">
        </li>
    </ul>
</div>

<style>
    .icon_group{
        position: fixed;
        right: 20px;
        bottom: 80px;
        z-index: 500;
    }
    .icon_group li{
        list-style: none;
        display: none;
        margin-top:20px;
        background: orangered;
        height: 30px;
        width: 30px;
        opacity: 0.8;
        border-radius: 50%;
        box-shadow: 0 0 1px 1px #666;
    }
    .icon_group img{

    }
    .icon_group .show22{
        display: block;
    }
    .show22{
        animation: 2s opacity2 0s infinite;
        -webkit-animation: 2s opacity2 0s infinite;
        -moz-animation: 2s opacity2 0s infinite;
    }
    @keyframes opacity2{
        0%{opacity:0.1}
        50%{opacity:.8;}
        100%{opacity:0.1;}
    }
    @-webkit-keyframes opacity2{
        0%{opacity:0.1}
        50%{opacity:.8;}
        100%{opacity:0.1;}
    }
    @-moz-keyframes opacity2{
        0%{opacity:0.1}
        50%{opacity:.8;}
        100%{opacity:0.1;}
    }

</style>
<script>
    $('.show22').click(function(){
        $('.icon_group li').show();
        $('.icon_group .show22').hide();
    });

    $('.hide22').click(function(){
        $('.icon_group li').hide();
        $('.icon_group .show22').show();
    });
    </script>