<!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. Python3.6全栈开发实例[015]

    15.电影投票:程序先给出几个目前正在上映的电影列表. 由用户给每个电影投票.最终将该用户投票信息公布出来 lst = ['北京遇上西雅图', '解救吴先生', '美国往事', '西西里的美丽传说'] ...

  2. Js用户引导插件intro

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...

  3. 剑指offer 面试50题

    面试50题: 题目:第一个只出现一次的字符 题:在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置. 解题思路一:利用Python特 ...

  4. Hibernate关联关系的CRUD

    本文以Group和User(一对多.多对一)双向关联为例,介绍关联关系的CRUD   下面先介绍两个属性 cascade:只影响CRUD中的CUD,即存储(save).更新(update).删除(de ...

  5. RocketMQ 笔记-转

    Astrotrain概述 Astrotrain是基于阿里巴巴开源项目RocketMQ进行封装的分布式消息中间件系统,提供集群环境下的消息生产和消费功能. RocketMQ介绍 RocketMQ的物理部 ...

  6. iOS获取某个日期后n个月的日期

    一.给一个时间,给一个数,正数是以后n个月,负数是前n个月: -(NSDate *)getPriousorLaterDateFromDate:(NSDate *)date withMonth:(NSI ...

  7. Android下Opengl ES实现单屏幕双眼显示

    http://blog.csdn.net/u011371324/article/details/68946779 默认情况下,Opengl ES使用系统提供的帧缓冲区作为绘图表面,一般情况下,如果只在 ...

  8. iOS_CLLocation定位

      CoreLocation框架可用于定位设备当前经纬度,通过该框架,应用程序可通过附近的蜂窝基站,WIFI信号或者GPS等信息计算用户位置.      iOS定位支持的3种模式.      (1)G ...

  9. Kubernetes List-Watch

    list-watch,作为k8s系统中统一的异步消息传递方式,对系统的性能.数据一致性起到关键性的作用. list-watch操作需要做这么几件事: 由组件向apiserver而不是etcd发起wat ...

  10. etcd 安装部署

    etcd 是coreos团队开发的分布式服务发现键值存储仓库. github地址: https://github.com/coreos/etcd 安装: 1.下载etcd最新版本 https://gi ...