基于animation.css实现动画旋转特效

分享一款基于animation.css实现动画旋转特效。这是一款基于CSS3实现的酷炫的动画旋转特效代码。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

 <div class="wrap">
        <div class="mod_bg">
            <div class="bg1"></div>
            <div class="bg2"></div>
            <div class="bg3">
                <div class="bg3_1"></div>
                <div class="bg3_2"></div>
                <div class="bg3_3"></div>
            </div>
            <div class="bg4"></div>
        </div>
        <div class="main" id="J_main">
            <div class="mod_info1">
                <div class="mod_info1__flash mod_info1__f"></div>
                <div class="mod_info1__flash1 mod_info1__f"></div>
                <div class="mod_info1__flash2 mod_info1__f"></div>
                <div class="mod_info1__flash3 mod_info1__f"></div>
                <div class="mod_info1__logo1 mod_info1__logoall"></div>
                <div class="mod_info1__logo2 mod_info1__logoall"></div>
                <div class="mod_info1__logo3 mod_info1__logoall"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(\'.mod_info2__power3\').on(\'mouseover\', function (e) {
            $(\'.mod_info2__power3\').addClass(\'play\');
        });
        $(\'.mod_info2__power3\').on(\'mouseout\', function (e) {
            $(\'.mod_info2__power3\').removeClass(\'play\');
        });
        $(\'.mod_info2__power1\').on(\'mouseover\', function (e) {
            $(\'.mod_info2__power1\').addClass(\'play\');
        });
        $(\'.mod_info2__power1\').on(\'mouseout\', function (e) {
            $(\'.mod_info2__power1\').removeClass(\'play\');
        });
        $(\'.mod_info2__power2\').on(\'mouseover\', function (e) {
            $(\'.mod_info2__power2\').addClass(\'play\');
        });
        $(\'.mod_info2__power2\').on(\'mouseout\', function (e) {
            $(\'.mod_info2__power2\').removeClass(\'play\');
        });
        $(\'.mod_info2__power4\').on(\'mouseover\', function (e) {
            $(\'.mod_info2__power4\').addClass(\'play\');
        });
        $(\'.mod_info2__power4\').on(\'mouseout\', function (e) {
            $(\'.mod_info2__power4\').removeClass(\'play\');
        });

        // setTimeout(function() {
        //     $(\'.mod_info2__power3\').addClass(\'play\');
        //     $(\'.mod_info2__power1\').addClass(\'play\');
        //     $(\'.mod_info2__power2\').addClass(\'play\');
        //     $(\'.mod_info2__power4\').addClass(\'play\');
        // },1000);

        // setTimeout(function() {
        //     $(\'.mod_info2__power3\').removeClass(\'play\');
        //     $(\'.mod_info2__power1\').removeClass(\'play\');
        //     $(\'.mod_info2__power2\').removeClass(\'play\');
        //     $(\'.mod_info2__power4\').removeClass(\'play\');
        // },4000);
    </script>

via：http://www.w2bc.com/article/49698