<!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. js事件传播的一个疑惑

    在学习事件传播的时候,发现一个问题,当时是这样子的. 我给多层元素分别绑定了冒泡和捕获事件.按道理应该先从外向内执行完所有的捕获事件,再由内向外执行所有的冒泡事件. 但是天不随人愿啊,有个元素偏偏先执 ...

  2. 跨域传输信息postMessage

    widnow.postMessage()方法允许安全的跨域传输. Syntax otherWindow.postMessage(message, targetOrigin, [transfer]); ...

  3. Python: PS 图像特效 — 模糊玻璃

    今天介绍一种基于高斯滤波和邻域随机采样,生成一种毛玻璃的图像特效,简单来说,就是先对图像做高斯滤波模糊,然后对模糊后的图像,通过对邻域的随机采样来赋予当前的像素点,这样,生成的图像有有一定的随机扰动和 ...

  4. PHPstorm相同变量标识

    setting-> plugins-> Browse Repositories 输入BrowseWordAtCaret 搜索,安装,然后重启

  5. ubuntu--vim 技巧

    本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了! vi编辑器是所有Unix及Linux系统下标准的编 辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法 ...

  6. 微信小程序开发之真机预览

    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...

  7. FTP服务基础

    网络文件共享 本章内容 FTP服务 NFS服务 SAMBA服务 DAS.NAS.SAN(文件) DAS:开放系统的直连式存储(Direct-Attached Storage) 磁盘连接到本机的电脑上, ...

  8. CodeForces 349B Color the Fence (DP)

    题意:给出1~9数字对应的费用以及一定的费用,让你输出所选的数字所能组合出的最大的数值. 析:DP,和01背包差不多的,dp[i] 表示费用最大为 i 时,最多多少位,然后再用两个数组,一个记录路径, ...

  9. JAVA基础--JAVA API集合框架(ArrayList、HashSet、HashMap使用)14

    一.集合Collection 1. 集合介绍 变量:表示的内存中的一个空间,只能保存确定类型的单个数据 数组:表示的是内存中的多个连续的空间,这些空间中可以存储多个同类型的数据. 后期继续学习面向对象 ...

  10. 微信小程序 设置宽度是100%，然后图片能成为正方形的方法。小程序按屏幕比例的正方形

    1.在全局app.js中获取设备的宽度 globalData: { userInfo: null, sysWidth:wx.getSystemInfoSync().windowWidth, //图片宽 ...