<!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. 怎样使用Chrome模拟手机浏览器測试移动端网站

    作者:zhanhailiang 日期:2014-10-10 环境说明: Chrome 37.0.2062.124 m 1. 通过[菜单→工具→开发人员工具|Javascript控制台]或[快捷键Ctr ...

  2. 协程 Gevent

    # 协程应用:爬虫 from gevent import monkey;monkey.patch_all() import gevent import requests import time def ...

  3. Linux中权限管理之sudo权限

    1.suodo的操作对象是系统命令 2.root把本来只能是超级用户执行的命令赋予普通用户执行 3.设置sudo权限 命令:visudo 找到: ## Allow root to run any co ...

  4. Linux中权限管理之ACL权限

    1.简介: a.作用: 是为了防止权限不够用的情况,一般的权限有所有者.所属组.其他人这三种,当这三种满足不了我们的需求的时候就可以使用ACL权限 b.故事背景: 一个老师,给一个班的学员上课,他在l ...

  5. Python之迭代器和生成器（Day17）

    一.可迭代对象(iterable) 刚才说过,很多容器都是可迭代对象,此外还有更多的对象同样也是可迭代对象,比如处于打开状态的files,sockets等等.但凡是可以返回一个迭代器的对象都可称之为可 ...

  6. Python基础（9）_生成器（yield表达式形式）、面向过程编程

    一.yield表达式形式 1 #装饰器,初始化含yield表达式的生成器 def init(func): def wrapper(*args,**kwargs): g=func(*args,**kwa ...

  7. iOS 学习如何声明私有变量和私有方法

    私有变量 首先来说 OC 中没有绝对的私有变量,这么说基于两点原因: 1可修改:   通过KVC  键值编码 来修改私有成员变量的值 2可读取 :  通过底层runtime 获取实例变量Ivar 对应 ...

  8. 【Flask】Sqlalchemy lazy

    ### 懒加载:在一对多,或者多对多的时候,如果想要获取多的这一部分的数据的时候,往往能通过一个属性就可以全部获取了.比如有一个作者,想要或者这个作者的所有文章,那么可以通过user.articles ...

  9. node做验证码

    使用了ccap插件 1.安装: 通用方法:npm install ccap 2. cnst ccap= require('ccap')({ width: 128, height: 40, offset ...

  10. PHP面向对象之对象和引用

    在PHP中对象类型和简单变量类型表现可以说是大相径庭,很多数据类型都要可以在写时进行复制,如当写代码$a=$b时,两个变量因为赋予相同的值而告终.所以需要注意的是,这种情况用在对象时就会完全不同了. ...