<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

.spinner {

  width:60px;

  height:60px;

  background:#67CF22;

  margin:100px auto;

  -webkit-animation:rotateplane 1.2s infinite ease-in-out;

  animation:rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

  0% {

    -webkit-transform:perspective(220px);

  }

  50% {

    -webkit-transform:perspective(220px) rotateY(180deg);

  }

  100% {

    -webkit-transform:perspective(220px) rotateY(180deg) rotateX(180deg);

  }

}

@keyframes rotateplane {

  0% {

    transform:perspective(120px) rotateY(0) rotateX(0);

    -webkit-transform:perspective(220px) rotateY(0) rotateX(0);

  }

  50% {

    transform:perspective(120px) rotateY(0) rotateX(-180.1deg);

    -webkit-transform:perspective(220px) rotateY(0) rotateX(-180.1deg);

  }

  100% {

    transform:perspective(120px) rotateY(-179.9deg) rotateX(-180deg);

    -webkit-transform:perspective(220px) rotateY(-179.9deg) rotateX(-180deg);

  }

}

</style>

</head>

<body>

<div class="spinner"></div>

</body>

</html>

css-div翻转动画的更多相关文章

  1. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  4. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  5. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  6. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  9. JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能

    原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...

  10. CSS篇之动画（2）

    animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...

随机推荐

  1. Python学习（七） —— 装饰器、迭代器、生成器

    一.装饰器(decorator) 1.装饰器的本质是闭包函数,作用:在不改变函数的调用方式的情况下,给函数的前后添加新的功能 #装饰器的固定结构 def warpper(func): #定义装饰器函数 ...

  2. Codeforces 986D Perfect Encoding FFT 分治 高精度

    原文链接https://www.cnblogs.com/zhouzhendong/p/9161557.html 题目传送门 - Codeforces 986D 题意 给定一个数 $n(n\leq 10 ...

  3. kmp基础 ekmp

    +]; int lenp,lens; +];//可以是char 也可以是string +]; void getnext() { nex[]=-; ,j=; ) { ||p[j]==p[k]) nex[ ...

  4. java反射对实体类取值和赋值

    public static void checkDesignerEdit(Object dtos) throws Exception { Class dtosClass = dtos.getClass ...

  5. fetch的总结

    && ) { && ) { }); });

  6. HDU 3342 Legal or Not (图是否有环)【拓扑排序】

    <题目链接> 题目大意: 给你 0~n-1 这n个点,然后给出m个关系 ,u,v代表u->v的单向边,问你这m个关系中是否产生冲突. 解题分析: 不难发现,题目就是叫我们判断图中是否 ...

  7. python系统性能模块笔记

    内存信息psutil.cpu_times()            使用cpu_times方法获取cpu完整信息,需要显示所有逻辑cpu信息(指定变量percpu=True)psutil.cpu_ti ...

  8. 手动实现Promise

    Promise对大家来说并不是很陌生,它是一个异步编程的解决方案,主要解决了前端回调地域问题.用阮老师的话说,它“就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果”. Pro ...

  9. HDU.5765.Bonds(DP 高维前缀和)

    题目链接 \(Description\) 给定一张\(n\)个点\(m\)条边的无向图.定义割集\(E\)为去掉\(E\)后使得图不连通的边集.定义一个bond为一个极小割集(即bond中边的任意一个 ...

  10. JavaScript基础笔记（十三）测试和调试

    错误处理与测试 一.错误处理 一)try-catch语句 function atest() { try { //可能发生错误的代码 return 0; } catch (error) { //错误处理 ...