<!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. mysql 数据库修改用户名和密码

    因为经常修改数据库密码,也找到了几种修改数据库密码的方式,在这里给大家介绍下供大家参考通过navicat 管理数据库客户端来修改数据库密码: 选择数据库 --- 点击导航条的用户  --- 编辑用户 ...

  2. bzoj3622

    容斥原理 看见恰好k个就要容斥 g[i]表示有几个b比a小 dp[i][j]表示前i个数至少有j个大的方案数,dp[i][j]=dp[i-1][j]+dp[i-1][j-1]*(g[i]-j+1),就 ...

  3. CSS动画的性能分析和浏览器GPU加速

    此文已由作者袁申授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 有数的数据大屏可以在一块屏幕上展示若干张不同的图表,以炫酷的方式展示各种业务数据.其中有些图表使用CSS实现了 ...

  4. 洛谷 - P2568 - GCD - 欧拉函数

    https://www.luogu.org/problemnew/show/P2568 统计n以内gcd为质数的数的个数. 求 \(\sum\limits_p \sum\limits_{i=1}^{n ...

  5. IOS实时监控上传下载速度

    在开发中要获取网络类型是很简单的,导入Reachability直接获取状态就行了,现在我们要做一个类似下载器的那种实时把上传下载速度显示出来. 需要用到的头文件 使用Reachability 要测速度 ...

  6. C++构造函数和拷贝构造函数详解

    构造函数.析构函数与赋值函数是每个类最基本的函数.它们太普通以致让人容易麻痹大意,其实这些貌似简单的函数就象没有顶盖的下水道那样危险. 每个类只有一个析构函数和一个赋值函数,但可以有多个构造函数(包含 ...

  7. laravel 布局 详解（实例）

    在resources/views里创建layouts,并在layouts里创建app.blade.php, 这个php文件放的就是你的页面框架,也就是多页面公用的内容,如下 <!DOCTYPE ...

  8. c# 添加reference后，Visual Studio 仍然提示无法找到函数, 询问是否添加了含有这个函数的Assembly

    1.问题 添加reference后,编译仍然无法通过,测试工程添加这个assembly 就可以编译通过. 对比了这个assembly的 .net 版本,也没问题 由于工程是x64的, 添加的assem ...

  9. bzoj 2055: 80人环游世界【有上下界有源汇最小费用最大流】

    连有上下界的边(ss,i,(0,m),0),(i',t,(0,m),0),表示从任意点开始和结束 连(i,j,(0,m),d[i][j]),表示可以买票飞过去 连(i,i',(v[i],v[i]),0 ...

  10. 第二篇 HTML5打包发布IOS APP之苹果开发者账号申请流程

    打包技术转移到了公众号