Chrome立体动画代码
效果预览:http://hovertree.com/code/run/css/x8l6si70.html
请实用Chrome浏览器查看效果,手机上也可以.
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS3正方形翻转动画 - 何问起</title>
<meta charset="utf-8" />
<style>
.hewenqicube--ani {
-webkit-animation: rot 4s linear infinite;
}
@-webkit-keyframes rot {
to { -webkit-transform: rotateY(-330deg) rotateX(370deg); }
}
.hewenqicube{border:darkgreen solid 2px;width:200px;height:200px;background-color:silver;}
#hovertreecom{width:400px;margin:10px auto;}
</style>
</head>
<body> <div id="hovertreecom">
<h2>CSS3正方形翻转动画 by 何问起</h2>
<div class='hewenqicube hewenqicube--ani'>
正方形翻转动画,请使用Chrome浏览器 。 http://hovertree.com
<a href="http://hovertree.com">何问起</a>
</div>
</div>
</body>
</html>
转自:http://hovertree.com/code/css/x8l6si70.htm
更多特效:http://www.cnblogs.com/roucheng/p/texiao.html
Chrome立体动画代码的更多相关文章
- 利用chrome调试JavaScript代码
看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...
- 如何用chrome修改js代码,跳过网站等待时间
用chrome修改js代码 By Z.H. Fu 切问录 [maplewizard.github.io](http://maplewizard.github.io ) 网页中大部分的限制都是由js编写 ...
- 加入收藏夹的js代码(求兼容chrome浏览器的代码)
从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- Google Chrome调试js代码,开发者工具之调试工具常用功能
参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...
- IOS 制作动画代码和 设置控件透明度
方式1: //animateWithDuration用1秒钟的时间,执行代码 [UIView animateWithDuration:1.0 animations:^{ //存放需要执行的动画代码 s ...
- android动画(3)layout动画,layoutChanged动画及算定义它,ListViewActivity的Layout动画(代码和xm配置两种实现l)
1.layout切换动画 代码: 本示例是fragment切换.在它的oncreateView中 public class LayoutAnimationFrgmt extends Fragment ...
- QuartzCode快速开发动画代码工具
QuartzCode快速开发动画代码工具 QuartzCode一款快速,轻量,强大的动画工具,可快速得到原生的ObjC/Siwft代码 我可以用QuartzCode做什么? 应用程序演练动画 动画菜单 ...
- Chrome 下动画卡顿问题的另一种可能
[现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...
随机推荐
- IIS Community Newsletter June 2013
Announcements Windows 2012 Server R2 preview released Windows Server 2012 R2 provides a wide range o ...
- Hadoop学习笔记—15.HBase框架学习(基础实践篇)
一.HBase的安装配置 1.1 伪分布模式安装 伪分布模式安装即在一台计算机上部署HBase的各个角色,HMaster.HRegionServer以及ZooKeeper都在一台计算机上来模拟. 首先 ...
- MySQL 复制表结构
200 ? "200px" : this.width)!important;} --> 介绍 有时候我们需要原封不动的复制一张表的表结构来生成一张新表,MYSQL提供了两种便 ...
- AngularJs项目文件以及文件夹结构
app/ ----- Libs/ // references for all libs ---------- angular.js ---------- angular-route.js ----- ...
- crossplatfrom---electron入门教程
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- 关闭form上chrome的autofill
Chrome的autofill会自动找到form中的type=password的元素,然后把这个元素前面的元素当做是用户名,它不在乎这个元素叫什么名字.这样又是注册又是登录,你会发现它自作聪明的aut ...
- 深入理解DOM节点类型第三篇——注释节点和文档类型节点
× 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...
- java使用Executor(执行器)管理线程
一.一个实现了Runnable接口的类 class MyThread implements Runnable{ private static int num = 0; @Override public ...
- Windws Server 2008 R2 WEB环境配置之MYSQL 5.6.22安装配置
版本选择 因为MySql的版本越来越多,而作为中小网站者可能没有足够的经济去购买商业版本,所以一般选择免费版,而且功能也是足够使用的. 有钱任性就下载企业版,哈哈. 目前使用最多的版本是mysql i ...
- iOS开发之新浪微博山寨版代码优化
之前发表过一篇博客“IOS开发之新浪围脖”,在编写代码的时候太偏重功能的实现了,写完基本功能后看着代码有些别扭,特别是用到的四种cell的类,重复代码有点多,所以今天花点时间把代码重构一下.为了减少代 ...