<!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. ansible Invetory(管理主机信息)

    1. 定义组机和组 inventory文件可以是许多格式之一,具体取决于您拥有的inventory插件. 对于这个例子, /etc/ansible/hosts的格式是一个INI(类似于Ansible的 ...

  2. systemd创建自定义服务(Ubuntu)

    /lib/systemd/system下创建test.service文件 vim /lib/systemd/system/test.service [Unit] Description=test [S ...

  3. ELK安装(ubuntu)

    一.安装jdk8 经过我测试logstash5.x不支持java10和11,所以安装java8 加入LinuxUprising Java PPA sudo add-apt-repository ppa ...

  4. Kafka命令行操作及常用API

    一.Kafka命令行操作 1.查看当前集群已存在的主题 bin/kafka-topic.sh --zookeeper hd09-01:2181 --list 2.创建主题 bin/kafka-topi ...

  5. 最长不下降子序列nlogn

    b[i]表示长度为i的最长不下降子序列的最小末尾元素的值显然它是单调递增的,满足二分性质,然后就可以愉快地二分啦. #include<iostream> #include<cstdi ...

  6. 在Qt项目中添加全局宏变量来达到按方案编译的目的

    遇到一个需求,需要根据不同需要编译所需程序,本人采用了在QtCreator中建立不同的构建设置,配合宏的方式来实现: 1.在项目-构建设置中,添加构建配置2.在构建步骤里的qmake中的额外参数一栏填 ...

  7. [linux]服务器apache配置vhost

    官网示例: http://httpd.apache.org/docs/current/vhosts/examples.html

  8. Shell脚本笔记（四）条件判断

    条件判断 一.条件测试与比较 一)条件测试基础语法 下列测试语法中如果测试的表达式成立,条件测试就会结束,并返回0. 1.test条件测试 语法:test  <测试表达式> 2.中括号条件 ...

  9. 免花生壳 TCP测试 DTU测试 GPRS测试TCP服务器

    通常在学习GPRS或者DTU的时候,往往没有自己的服务器,很多时候我们只能用这个模块打个电话发个短信,但是随着移动互联的兴起,各行各业大家都开始弄移动接入.为了这个需求,这里提供TCP移动接入. 工作 ...

  10. [CSAcademy]Or Problem

    [CSAcademy]Or Problem 题目大意: 一个长度为\(n(n\le2\times10^5)\)的序列\(A(0\le A_i<2^{20})\),将其分为恰好\(m\)个连续段, ...