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

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

上一篇:昨天刚看了Handler和HandlerThread这个东西,不明白为什么要用这么复杂的东西,而且Handler直接post的话好像还不是子线程运行。那我再开发的时候直接用Thread行不行?两个有什么区别?


下一篇:C++基础(三)—QT工程代码详解(一)