@-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. c数组和指针的理解

    #include<stdio.h> int main(void) { ,,,,}; ); printf(,*(p-)); // ] = &a; √ // ] = a; × // ] ...

  2. 常用CentOS 6/7 扩展源

    1.系统自带 baseextrasupdates 2.epel yum install epel-release https://fedoraproject.org/wiki/EPEL 3.el(用于 ...

  3. [转]c#.NET和VB.NET语法的比较

    本文转自:http://www.cnblogs.com/lify0407/archive/2007/08/01/838589.html c#.NET和VB.NET语法的比较   VB.NET C# C ...

  4. ASP实现https和http之间转化

    HTTPS 是一个安全通信信道,用于在客户计算机和服务器之间交换信息.它使用安全套接字层 (SSL). HTTPS (Secure Hypertext Transfer Protocol) 安全超文本 ...

  5. eclipse怎么切换SVN的用户

    在用eclipse的时候会经常用到SVN来进行代码的版本控制,为了方便起见,我们会保存密码,从此之后就不会再出现输入或者修改用户名和密码的地方了,这时候想切换用户怎么办,在本地操作的一种方法是删除SV ...

  6. web开发常用图片格式

    web开发常用图片格式有:gif   jpg/jpeg    png gif:图片压缩率高,可以显示动画,但是只能显示256色,可能造成颜色丢失. jpg:图片压缩率高(有损压缩),可以用小文件来显示 ...

  7. ###学习《C++ Primer》- 4

    点击查看Evernote原文. #@author: gr #@date: 2014-10-16 #@email: forgerui@gmail.com Part 4: STL关联容器(第11章) 一. ...

  8. iOS 获取系统相册数据(不是调系统的相册)

    Framework:AssetsLibrary.framework 主要目的是获取到系统相册的数据,并把系统相册里的照片显示出来. 1.创建一个新的项目: 2.将AssetsLibrary.frame ...

  9. (转)Quartz.NET管理类

    最近做项目设计到Quartz.NET,写了一个Quartz.NET管理类,在此记录下. public class QuartzManager<T> where T : class,IJob ...

  10. [RMQ] [线段树] POJ 3368 Frequent Values

    一句话,多次查询区间的众数的次数 注意多组数据!!!! RMQ方法: 预处理 i 及其之前相同的数的个数 再倒着预处理出 i 到不是与 a[i] 相等的位置之前的一个位置, 查询时分成相同的一段和不同 ...