基于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