<!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. python 时间模块小结

    python有两个重要的时间模块,分别是time和datetime time模块 表示时间的几种方法 时间元组 time.struct_time( tm_year=2016, tm_mon=7, tm ...

  2. python生成器&迭代器

    列表生成式 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 里每个值都加一 普通做法 a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]for index,i in e ...

  3. ansible的主机变量

    ansible的主机变量(常用):ansible_ssh_host     #用于指定被管理的主机的真实IPansible_ssh_port     #用于指定连接到被管理主机的ssh端口号,默认是2 ...

  4. vimium的使用介绍和基本用法

    vimium是chrome浏览器的一个插件,fq去chrome应用商店搜索vimium,下载安装 纯键盘操作,脱离了鼠标,提高效率 核心是f,安装好vimium后只需要按f,输入对应的编号就能进入相应 ...

  5. STM32 ~ CH340在STM32实现一键下载电路

    在做基于STM32的多功能MP3播放器的课题时,在程序下载这部分时借鉴了正点原子开发板上的一键下载电路,采用CH340G这款芯片设计. 在画PCB初期原理图部分,对采用CH340G设计的一键下载电路不 ...

  6. HAProxy详解

    HAProxy概述与配置 一.HAProxy概述 HAProxy是由 WillyTarreau开发的一款具备高可用性.负载均及基于 TCP和 HTTP的应用代理开源软件,基于HAProxy的负载均衡架 ...

  7. perspective 能玩点什么

    今天看又在看张鑫旭的博客,本来是在玩 transform:Matrix() 的,有讲到单个变化的矩阵设置,但多个变化的就不是那么回事了. 不过这都不是事啦,人生嘛,显然总会有些难关不是轻易能过去的,反 ...

  8. 第八篇、正则表达式 re模块

    一.常用匹配模式 #!/usr/bin/env python # -*- coding:utf-8 -*- import re #贪婪匹配:从后面开始 #()只需要提取括号中的内容,顺序从外到内 li ...

  9. 20145240 《Java程序设计》第一次实验报告

    20145240 <Java程序设计>第一次实验报告 实验内容 一.命令行下java程序开发 1.建立Code目录,输入mkdir 20145240命令建立实验目录,并使用dir命令查看目 ...

  10. python中threading多线程

    python中有两个处理多线程的模块thread和threading.其中thread提供了多线程底层支持的模块,以低级原始的发那个是来处理和控制线程,使用起来较为复杂:而threading基于thr ...