@-moz-keyframes daf{
0% {
-moz-transform: rotate(-360deg) scale(0.2);
-webkit-transform: rotate(-360deg) scale(0.2);
-o-transform: rotate(-360deg) scale(0.2);
-ms-transform: rotate(-360deg) scale(0.2);
transform: rotate(-360deg) scale(0.2);
} 100% {
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
}

  

.daf:not(:target){
animation-name: daf;
animation-duration: 1.5s;
animation-timing-function: linear;
-webkit-animation-name: daf;
-webkit-animation-duration:1.5s; -moz-animation-name: daf;
-moz-animation-duration: 1.5s; -o-animation-name: daf;
-o-animation-duration:1.5s; -ms-animation-name: daf;
-ms-animation-duration: 1.5s; }

  

css3 旋转出现动画的更多相关文章

  1. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  3. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  4. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

  6. CSS3轻松实现彩色旋转六面体动画

    一.效果预览: 二.基本思路: 1.首先这个一个自动触发的动画,因此应使用animation设计,包括自动组装和组装完成后自动旋转的过程: 2.当鼠标放上去的时候六个面及上面的字体均变色,应在六个面设 ...

  7. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  8. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  9. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

随机推荐

  1. 关于事件监听机制的总结(Listener和Adapter)

    记得以前看过事件监听机制背后也是有一种设计模式的.(设计模式的名字记不清了,只记得背后实现的数据结构是数组.) 附上事件监听机制的分析图: 一个事件源可以承载多个事件(只要这个事件源支持这个事件就可以 ...

  2. void指针、NULL指针和未初始化指针

    一个指针可以被声明为void类型,比如void *x.一个指针可以被赋值为NULL.一个指针变量声明之后但没有被赋值,叫做未初始化指针. 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  3. windows共享文件夹如何让CentOS 6.5读取

    http://www.111cn.net/sys/CentOS/74104.htm 工作需要,需要把本地win7共享的文件夹让CenotOS 6.5服务器临时使用一下,以下是CentOS 6.5系统挂 ...

  4. sql 中条件in参数问题

    经常遇到条件为in的模糊查询,sql传参可以在service中直接传递参数,不必使用占位符 select * from ud_order where status in ("+status+ ...

  5. 微软阵营企稳的利好消息:.NET开源、Visual Studio免费

    今天各个IT社区,头版头条说的是微软.NET开源了.宇宙中最好的IED–Visual Studio Community 2013将免费提供给用户的消息. <宇宙中最强大的开发环境免费了!> ...

  6. 第十四篇、Ajax与Json

    1.Ajax的核心知识 1.1 XMLHttpRequest对象 function loadName(){ var xmlHttp; if(window.XMLHttpRequest){ xmlHtt ...

  7. spring.net 和 mybatis.net

    demo是整合现有的spring.net 和 mybatis.net 完成的控制台程序,需要注意的地方:关于Config文件夹中的config文件的属性设定:同时保证Providers.config默 ...

  8. TLF相关资料

    1\(转)http://blog.csdn.net/hu36978/article/details/5796165 TFL 一般先创建TextFlow  通过控制flowComposer属性来控制文本 ...

  9. (poj)1806 Currency Exchange

    题目链接:http://poj.org/problem?id=1860 Description Several currency exchange points are working in our ...

  10. virtual析构函数的作用

    C++ Primter中讲“在 C++ 中,基类必须指出希望派生类重写哪些函数,定义为 virtual 的函数是基类期待派生类重新定义的,基类希望派生类继承的函数不能定义为虚函数”. 析构函数是为了在 ...