css3实现社交图标旋转

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3实现社交图标旋转的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>css3实现社交图标旋转效果</title>
    <link rel="stylesheet" href="css/common.css" media="screen" />
</head>

<style>
    #container {
        width: 960px;
        margin: 0 auto;
    }

    ul {
        width: 145px;
        margin: 0 auto;
        list-style: none;
        font-size: 0px;
    }

    li a {
        background: url(images/sprite.png) no-repeat;
        background-position: -55px 0;
        display: block;
        text-indent: -9999px;
        margin-top: 15px;
    }

        li a span {
            background: url(images/sprite.png) no-repeat;
            display: block;
            width: 30px;
            height: 32px;
            position: relative;
            z-index: 10;
            -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            transition: transform 0.4s ease-out;
        }

        li a:hover span {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg);
        }

    li.twitter a {
        background-position: -55px 0;
        width: 127px;
        height: 32px;
    }

        li.twitter a span {
            background-position: 0 0;
        }

    li.dribbble a {
        background-position: -55px -50px;
        width: 113px;
        height: 32px;
    }

        li.dribbble a span {
            background-position: 0 -50px;
        }

    li.lastfm a {
        background-position: -55px -100px;
        width: 107px;
        height: 32px;
    }

        li.lastfm a span {
            background-position: 0 -100px;
        }

    li.spotify a {
        background-position: -55px -150px;
        width: 98px;
        height: 32px;
    }

        li.spotify a span {
            background-position: 0 -150px;
        }

    li.ember a {
        background-position: -55px -200px;
        width: 119px;
        height: 32px;
    }

        li.ember a span {
            background-position: 0 -200px;
        }

    li.inspectelement a {
        background-position: -55px -250px;
        width: 144px;
        height: 32px;
    }

        li.inspectelement a span {
            background-position: 0 -250px;
        }
</style>

<body>

    <div id="container">

        <h1></h1>

        <ul id="social" class="group">

            <li class="twitter">
                <a href="#/">
                    <span></span>
                    twitter
                </a>
            </li>
            <li class="dribbble">
                <a href="#/">
                    <span></span>
                    dribbble
                </a>
            </li>
            <li class="lastfm">
                <a href="#/">
                    <span></span>
                    last.fm
                </a>
            </li>
            <li class="spotify">
                <a href="#/">
                    <span></span>
                    Spotify
                </a>
            </li>
            <li class="ember">
                <a href="#/">
                    <span></span>
                    ember
                </a>
            </li>
            <li class="inspectelement">
                <a href="#/">
                    <span></span>
                    Inspect Element
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

CSS代码(common.css):

*{padding:0;margin:0;text-decoration:none;border:none;}
body{background:#cacaca url(pattern.gif);text-align:center;margin-top:25px;color:#5f5f5f;font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:normal;line-height:22px;}
a.logo{background:url(logoSprite.png) 0px 0px;width:589px;text-indent:-9999px;height:120px;display:block;margin:0 auto;margin-bottom:25px;}
a.logo:hover{background:url(logoSprite.png) 0px -120px;-webkit-transform:rotate(-1deg) scale(1.02);-moz-transform:rotate(-1deg) scale(1.02);}
a.logo:active{background:url(logoSprite.png) 0px -240px;border-bottom:none;-webkit-transform:rotate(-1deg) scale(1);-moz-transform:rotate(-1deg) scale(1);}
a{margin-top:30px;color:#22c3eb;text-align:center;}
a.back,a.logo{display:block;}
@font-face{font-family:Graublau;src:url(GraublauWeb.otf) format("opentype")}
h1{font-family:Graublau;margin:45px 0 75px;font-weight:normal;}
#carbonads-container{margin:0 auto;margin-top:80px;width:300px;}
#carbonads-container .carbonad-text,#carbonads-container span{text-align:left !important;}

附件:下载该文件资源,减少时间成本(增值服务)