基于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
基于animation.css实现动画旋转特效的更多相关文章
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- 4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览 源码下载 实现的代码 ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
随机推荐
- Linux CentOS 7.x/6.x/5.x 导入epel源
How to Enable EPEL Repository for RHEL/CentOS 7.x/6.x/5.x vim /etc/yum.repos.d/CentOS-Base.repo 取消注释 ...
- centos6.4安装GitLab
参考文章: http://www.pickysysadmin.ca/2013/03/25/how-to-install-gitlab-5-0-on-centos-6/ yum安装redis的方法: h ...
- Oracle 12C -- 使用local PDB克隆新的PDB
1.将用于克隆的PDB至于只读状态:startup open read only SQL> select con_id,name,open_mode from v$pdbs; CON_ID NA ...
- “The operation cannot be completed because the DbContext has been disposed” exception with lazy load disabled
http://stackoverflow.com/questions/18261732/the-operation-cannot-be-completed-because-the-dbcontext- ...
- android中碰撞屏幕边界反弹问题
其实碰撞问题只是涉及到一点小算法而已,但在实际应用,尤其游戏中有可能会遇到,下面给出一个小示例,代码如下: MainActivity: package com.lovo; import android ...
- 【转】WARNING! File system needs to be upgraded. You have version null and I want version 7. Run the '${HBASE_HOME}/bin/hbase migrate' script. 的解决办法
前段时间集群出问题,hadoop和hbase启动不了了. 后来hadoop回复了,hbase死活master无法启动.打开日志发现报了以下错误: WARNING! File system needs ...
- MongoDB ReplacaSet & Sharding集群安装 配置 和 非集群情况的安装 配置 -摘自网络
单台机器做sharding --单机配置集群服务(Sharding) --shard1_1 mongod --install --serviceName MongoDBServerShard1 --s ...
- Java:多线程,Semaphore同步器
1. 背景 类java.util.concurrent.Semaphore提供了一个计数信号量.通过Semaphore类,可以控制某个资源可被同时访问的个数,通过 acquire() 获取一个许可,如 ...
- 牛津大学xDeepMind自然语言处理
http://study.163.com/course/introduction/1004336028.htm
- .NET Core 中读取appsettings.json配置文件的方法
appsettings.json配置文件结构如下: { "WeChatPay": { "WeChatApp_ID": "wx9999998999&qu ...