transition

过渡效果

by Micheal mu

HTML

<!-- 容器 -->
<div class="container-box radius-box">
    <!-- logo -->
    <img class="logo radius-box" src="http://pic.cnblogs.com/avatar/387969/20141021152547.png" alt="logo图片"/>
    <!-- logo end -->
</div>
<!-- 容器 end -->

CSS

/************** 圆角边框样式 ******************/
        .radius-box {
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -o-border-radius: 100px;
        }

        /************** 容器样式 ******************/
        .container-box {
            width: 100px;
            height: 100px;
            border: solid 5px #ccc;

        }

        /************** logo样式 ******************/

        .logo {
            width: 100px;
            height: 100px;
            border: solid 5px #ffffff;
            box-sizing: border-box;
            opacity: 1;
            transition: opacity 1s ease .1s;
            -webkit-transition: opacity 1s ease .1s; /* Safari 和 Chrome */
            -moz-transition: opacity 1s ease .1s; /* Firefox 4 */
            -o-transition: opacity 1s ease .1s;/* Opera */
        }

        /************** logo:hover状态下将opacity改为0 ******************/
        .logo:hover {
            opacity: 0;
        }