html5关键帧动画，一个小例子快速理解关键帧动画

1.定义关键帧

@keyframes zhuanquan
{
　　0% {-webkit-transform: rotate(0);}
　　100% {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes zhuanquan/* Safari and Chrome */
{
　　0% {-webkit-transform: rotate(0);}
　　100% {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes zhuanquan/* Safari and Chrome */
{
　　0% {-webkit-transform: rotate(0);}
　　100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes zhuanquan/* Firefox */
{
0% {-webkit-transform: rotate(0);}
100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes zhuanquan/* Opera*/
{
0% {-webkit-transform: rotate(0);}
100% {-webkit-transform: rotate(360deg);}
}

2.使用，小圆圆周运动实例

.xiaoyuan {
            width:213px; height:213px;//滚动范围，半径

　　　　　　　position:absolute;//定位

　　　　　　　top:50%; left:50%;//定位到中间

            -webkit-animation: zhuanquan infinite linear 10s;//调用名称  无穷次调用，循环  均匀线性滚动
            -webkit-transform-origin: 0 0;//定义基点位置}
.xiaoyuan:after {width:20px; height:20px; position:absolute;right: 0;content: "";border-radius:20px;background:#5091c0; }

时间： 2024-10-11 12:05:16

html5关键帧动画，一个小例子快速理解关键帧动画的相关文章

一个小例子对多态简单的理解

class Parent{ int age; String name; public Parent(String name, int age){ this.name = name; this.age = age; } public void writeWay(){ System.out.println("毛笔!"); } } class Child extends Parent{ int age; String name;//这里只说为了说明一个问题,其实完全可以有父类继承而来. pu

从一个小例子认识SQL游标

原文:从一个小例子认识SQL游标 1 什么是游标: 关系数据库中的操作会对整个行集起作用. 例如,由 SELECT 语句返回的行集包括满足该语句的 WHERE 子句中条件的所有行. 这种由语句返回的完整行集称为结果集. 应用程序,特别是交互式联机应用程序,并不总能将整个结果集作为一个单元来有效地处理. 这些应用程序需要一种机制以便每次处理一行或一部分行. 游标就是提供这种机制的对结果集的一种扩展. 游标通过以下方式来扩展结果处理: 允许定位在结果集的特定行. 从结果集的当前位置检索一行或一

Spring 基础，用小例子来理解它

1.什么是Spring? 我们都知道框架,我学的就是struts2,mybatis和spring 三大框架 struts2处于表现层和业务处理 mybatis处理业务处理和数据访问而Spring是无处不在的. 以上是我对Spring的理解 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development and Design中阐述的部分理念和原型衍生而来.它是为了

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined console.log(b.x);// --> [object Object] </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

java操作xml的一个小例子

最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要定义好bean的层次结构就可以了,第三方包会自动生成和解析xml. 但是今天发现,这个包有两个问题: 一个是比较复杂(我是菜鸟,求别喷,我真的觉得他挺复杂的..).比如说你要想处理既有属性又有值的xml就比较麻烦.(@XStreamConverter注解这种方法报这个错:com.thoughtwor

java连接mysql的一个小例子

想要用java 连接数据库,需要在classpath中加上jdbc的jar包路径在eclipse中,Project的properties里面的java build path里面添加引用连接成功的一个小例子数据库如下如代码 package query; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; impor

puppet运行慢的一个小例子

一个小例子来看下怎么debug puppet运行慢的问题. 一个小例子来看下怎么debug puppet运行慢的问题. 发现一台机器的agent运行比较缓慢,首先看下puppet server的整体性能: puppet server使用了passenger+nginx的结构,性能比较稳定,接入1200台机器左右,passenger类似于php-fpm,可以设定启动的处理进程数等参数,用来调整server的性能. 比如参数passenger_max_pool_size,这个值的设置需要考虑两个因素

Spring.Net在ASP.NET Mvc里使用的一个小例子

就贴个小例子,就不注意格式了. 1.下载dll NuGet的下载地址:http://docs.nuget.org/docs/start-here/installing-nuget 在vs的NuGet里搜索spring.web.mvc,它会自动下载SpringNet的引用包. 安装完成之后你的项目会多三个引用,项目目录../packages文件夹下面也会多出这三个文件夹里面是SpringNet的文件. 2.写代码例子很简单的例子.定义一个接口,一个对于接口的实现类. namespace MvcA

倒计时CountDownTimer的一个小例子

在网上看到一个小例子,练习后总结如下: 首先,布局文件中仅包含一个文本框.main.xml代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layou