<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{

            font-size:12px;

            margin:0;padding:0;

        }

        #box{

            width:300px;

            height: 300px;

            margin:100px auto;

            border:1px solid #ccc;

            transition: all 0.3s;

            -webkit-transition: all 0.3s;

        }

        .inner-box{

            width:60px;

            height: 30px;

            margin:100px auto;

            border:1px solid #ccc;

            transition: all 0.3s;

            -webkit-transition: all 0.3s;

        }

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from{transform:rotate(0deg);}

to {transform:rotate(360deg);}

}

        #box:hover{

            border-radius: 50%;

            background:#007aff;

            box-shadow: 5px 10px 10px rgba(0,0,0,.3);

            -webkit-animation: myfirst 3s;

            -webkit-animation-iteration-count:3;

            -webkit-animation-direction:alternate;

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="inner-box"></div>

        <div class="inner-box"></div>

    </div>

</body>

</html>

简单CSS3动画的更多相关文章

  1. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

  2. css3动画简单应用

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  3. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  4. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  5. SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子

    今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...

  6. css3动画简单案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  8. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. 图像分割之mean shift

    阅读目的:理解quick shift,同时理解mean shift原理,mean shift用于图像聚类,优点是不需要指定聚类中心个数,缺点是计算量太大(原因). mean shift主要用来寻找符合 ...

  2. NPOI导出excel表格应用

    最近接到一个需求,在原有系统上做二次开发 ,要求导出DataGridView数据到Excel表格中.要求如下: 兼容所有excel版本: 导出后excel各列的样式,字段类型不变. 成型如下:

  3. checked 和 unchecked 基元类型操作

    对基元类型执行的许多算术运算都可能造成溢出: Byte b = ; b = (Byte) (b + ); // b 现在包含 44(或者十六进制值 2C) 重要提示:执行上述算术运算时,第一步要求所有 ...

  4. Eclipse Find/Replace

    1.Eclipse内容助手 选中Regular expressions,使用正则表达式进行匹配.图中出现了小黄灯,Ctrl+Space显示出帮助信息. 2.Wrap search(循环检索)选中后,检 ...

  5. SpringMVC:学习笔记(3)——REST

    SpringMVC:学习笔记(3)——REST 了解REST风格 按照传统的开发方式,我们在实现CURD操作时,会写多个映射路径,比如对一本书的操作,我们会写多个URL,可能如下 web/delete ...

  6. Openstak（M版）控制节点安装

    #############修改hosts文件 # controller10.0.0.11 controller# compute110.0.0.31 compute1# block110.0.0.41 ...

  7. Linux用户和用户组管理 用户配置和管理的相关文件

    用户信息文件 /etc/passwd 这个文件中保存的就是系统中所有的用户及其对应的用户主要信息. 文件格式 :  第1字段 第2字段 第3字段 第4字段 第5字段 第6字段 第7字段 用户名称 密码 ...

  8. TIJ读书笔记01-操作符

      TIJ读书笔记01-操作符 概述 关系操作符和逻辑操作符 位操作符 类型转换 概述 操作符 操作符接受一个或多个参数,并生成一个新值. 换句话说操作符作用于操作数,生成一个新值.有些操作符会改变操 ...

  9. [转]AOP那些学术概念—通知、增强处理连接点（JoinPoint)切面（Aspect）

    AOP那些学术概念—通知.增强处理连接点(JoinPoint)切面(Aspect) 1.我所知道的AOP 初看起来,上来就是一大堆的术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充 ...

  10. 20145239杜文超《网络攻防》- MSF基础应用

    20145239杜文超<网络攻防>- MSF基础应用 基础问题回答 1.用自己的话解释什么是exploit,payload,encode? exploit:实现攻击行为的主体,但没有载荷只 ...