<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        #img{

            width:200px;

            height:200px;

            border:100px solid green;

            border-left-color: red;

            border-right-color: black;

            border-top-color: yellow;

            margin:100px;

            border-radius:50%;

            -webkit-animation:circle 1s infinite linear;

            -moz-animation:circle 1s infinite linear;

        }

        @-webkit-keyframes circle{

            0%{ transform:rotate(0deg); }

            100%{ transform:rotate(-360deg); }

        }

        @-moz-keyframes circle{

            0%{ transform:rotate(0deg); }

            100%{ transform:rotate(-360deg); }

        }

    </style>

</head>

<body>

<div id="img"></div>

</body>

</html>

　　

h5旋转效果的更多相关文章

  1. H5页面背景音乐，C33 360°旋转效果

    在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡.动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?我现整理了一下代码:  Demo  点击 ...

  2. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  3. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  4. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  5. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  6. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  9. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. 上传图片 ajax input type="file" 兼容 ie chroem 火狐

    上传图片,转载请注明出处!!! 兼容 ie chroem 火狐 html: <div id="uploadForm"> <input id="file& ...

  2. VC6.0 快捷键

    F1: 帮助 Ctrl+O   :OpenCtrl+P   :PrintCtrl+N   :NewCtrl+Shift+F2 :清除所有书签F2    :上一个书签Shift+F2 :上一个书签Alt ...

  3. vim 使用、设置笔记

    一.设置.vimrc( windows下通常为_vimrc) 1.设置vim中tab的缩进 set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格) set expandtab (注 ...

  4. vue.js 组件共用函数的方法之一

    如果我现在写一个组件pullMore,想要用到loadMore里面的方法(函数), 那么只需要在当前组件pullMore,script里面先引入组件import loadMore from './lo ...

  5. kitti 数据集解析

    1.KITTI数据集采集平台: KITTI数据采集平台包括2个灰度摄像机,2个彩色摄像机,一个Velodyne 3D激光雷达,4个光学镜头,以及1个GPS导航系统.坐标系转换原理参见click.KIT ...

  6. This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x0501 or higher is recommended

    VS2005转换成VS2010时出现的问题: This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x05 ...

  7. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  8. css3 实现瀑布流

    掌握点: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: avoid; 避免元素 ...

  9. rpm 命令|rpm 安装|rpm 卸载|rpm 使用|rpm 删除

    在Linux操作系统中,有一个系统软件包,它的功能类似于Windows里面的“添加/删除程序”,但是功能又比“添加/删除程序”强很多,它就是Red Hat Package Manager(简称RPM) ...

  10. Websocket 学习

    一.含义 WebSocket 是一种在单个TCP连接上进行全双工通讯的协议.   WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket ...