你的位置:首页 > 软件开发 > Java > 基于animation.css实现动画旋转特效

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

发布时间:2015-07-20 10:00:05
分享一款基于animation.css实现动画旋转特效。这是一款基于CSS3实现的酷炫的动画旋转特效代码。效果图如下:在线预览 源码下载实现的代码。html代码: <div class="wrap"> <div c ...

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

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

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

在线预览    源码下载

实现的代码。

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>

原标题:基于animation.css实现动画旋转特效

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。