@-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. sysctl

    /proc/sys目录下存放着大多数内核参数,并且可以在系统运行时进行更改,不过重新启动机器就会失效./etc/sysctl.conf是一个允许改变正在运行中的Linux系统的接口,它包含一些TCP/ ...

  2. 目前项目wordpress插件记录

    Restrict User Content WordPress 后台只显示当前登录用户的文章.页面和媒体 Client Dash 可以根据不同的角色生成不同的后台的菜单

  3. 第一个Cookie应用

    Cookie应用:显示用户上次访问时间 package com.itheima.cookie; import java.io.IOException; import java.io.PrintWrit ...

  4. 结果集一组数据的第几条ROW_NUMBER基本用法

    因为项目中用到,今天来记录下 ROW_NUMBER的用法. 说明:返回结果集分区内行的序列号,每个分区的第一行从 1 开始. 语法:ROW_NUMBER () OVER ([ <partitio ...

  5. linux之let用法

    shell程序中的操作默认都是字符串操作,在要运行数学运算符的时候可能得到意想不到的答案: var=1 var=$var+1 echo $var output:1+1 从这个例子中可以看出shell字 ...

  6. smarty半小时快速上手入门教程

    http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...

  7. 【原创】关于MVC自己新建的 action,Controller提示找不到页面的问题

    一.实例: 1.比如我自己新建了一个~/view/Shop  文件夹下的IndexShop.aspx,那么在Controllers文件夹下就要对应一个ShopController.cs的Control ...

  8. 11_Servlet基础知识

    [概念] Servlet通常被称为服务端小程序,是运行在服务端的程序,用于处理及相应客户端的请求. Servlet是用java语言开发网页动态资源的技术. [特点] 1.Servlet是个特殊的Jav ...

  9. mysql学习笔记4

    用phpmyadmin创建数据库时出现 #1064 - You have an error in your SQL syntax; check the manual that corresponds ...

  10. (转)MySQL Workbench的使用教程 (初级入门版)

    转自:http://www.cnblogs.com/yqskj/archive/2013/03/01/2938027.html MySQL Workbench 是 MySQL AB 最近释放的可视数据 ...