下面一段代码是，h5的画圆，半圆，四分之一圆等效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 300px;

            height: 300px;

            border: 1px solid red;

            border-radius: 150px;

            background:url("image/Capture001.png") 0px 0px no-repeat;

            background-size: cover ;

            transition: 0.1s;

            box-shadow: 10px 10px 10px red;

        }

        div:hover{

            transform: rotate(360deg)scale(1);

            -webkit-transition:0.1s;

            -moz-transition: 0.1s;

            -ms-transition: 0.1s;

            -o-transition: 0.1s;

            transition:all 0.1s linear ;

        }

        @-webkit-keyframes circle{

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

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

        }

        #a{

            width: 300px;

            height: 150px;

            border: 1px solid red;

            border-radius: 150px 150px 0px 0px;

        }

        #b{

            width: 300px;

            height: 150px;

            border: 1px solid red;

            border-radius: 0px 0px 150px 150px;

        }

        #c{

            width: 150px;

            height: 150px;

            border: 1px solid red;

            border-radius: 150px 0px 0px 0px;

        }

        #d{

            width: 150px;

            height: 150px;

            border: 1px solid red;

            border-radius: 0px 150px 0px 0px;

        }

        #e{

            width: 150px;

            height: 150px;

            border: 1px solid red;

            border-radius: 0px 0px 150px 0px;

        }

        #f{

            width: 150px;

            height: 150px;

            border: 1px solid red;

            border-radius: 0px 0px 0px 150px;

        }

        #g{

            width: 150px;

            height: 300px;

            border: 1px solid red;

            border-radius: 150px 0px 0px 150px;

        }

        #h{

            width: 150px;

            height: 300px;

            border: 1px solid red;

            border-radius: 0px 150px 150px 0px;

        }

    </style>

</head>

<body>

<center>

<div></div>

<div id="a"></div>

<div id="b"></div>

<div id="c"></div>

<div id="d"></div>

<div id="e"></div>

<div id="f"></div>

<div id="g"></div>

<div id="h"></div>

</center>

</body>

</html>

　　

h5画圆的更多相关文章

  1. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

  2. canvas入门（画圆）

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

  3. WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...

  4. 《图形学》实验六：中点Bresenham算法画圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...

  5. ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

    一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...

  6. 【openGL】画圆

    #include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...

  7. javascript画直线和画圆的方法（非HTML5的方法）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...

  9. 在AE中通过指定中心点和半径画圆

    /// <summary>/// 通过指定的中心点.半径画圆/// </summary>/// <param name="pLayer">要画的 ...

随机推荐

  1. input处理函数

    input处理函数是潜在的影响你app性能的问题,他们可以阻止帧的形成,并且可以造成多余的亦或不必要的layout的工作. 避免长时间运行input handler:它们会阻塞scroll 不要在in ...

  2. DDD领域驱动之干货(二)

       基于仓储的实现 1.前言:本着第一节写的有些糊涂,主要是自己喜欢实干,不太喜欢用文字表述,就这样吧.下面切入正题. 博客园里面有很多的大佬,我这里就不一一解释概览,有兴趣的朋友可以去看大佬们写的 ...

  3. c++之拷贝构造函数详解

    C++中经常使用一个常量或变量初始化另一个变量,例如: double x＝5.0: double y＝x; 使用类创建对象时,构造函数被自动调用以完成对象的初始化,那么能否象简单变量的初始化一样,直接 ...

  4. 为什么stc15的单片机，运行了几秒后就蹦了

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/53534465 还是那个led显示屏的项目...... stc15的单片机 运行了几 ...

  5. U盘安装 Linux 显示 “Faild to copy file from CD-ROM”

    解决方案 使用 UltraISO 刻录 U盘做镜像时,出现这种情况.查阅别人的 blog,尝试手动挂载发现还是不能成功.然后使用 win32diskimager 重新刻录,再次安装时未出现该情况. 参 ...

  6. Ubuntu12.04下安装VirtualBox

    目录: 安装虚拟机VirtualBox 虚拟机VirtualBox安装win7全过程 虚拟机共享文件夹.U盘 一.安装虚拟机VirtualBox VirtualBox下载地址:https://www. ...

  7. Coloring Brackets

    题意: 给一匹配的括号序列,要求每对括号恰有一个被染成蓝或红色,要求相邻的括号不同色,求方案数. 解法: 类比树的hash将括号序列转化为一棵树,树上子节点之间不得出现冲突, 子节点和父节点不得出现冲 ...

  8. Jacob开发文件转PDF

    这三种方法我都有试过word转PDF,第2种.第3种对于图片,表格.中文转换效果都不好,方法1效果最好.但方法1 只支持Windows环境下. 1.开发环境 Windows系统: 2.准备工作: st ...

  9. checkbox的几种遍历方法

    html代码如下: <div> <input type="checkbox" name="ckb" value="1" / ...

  10. apk重签名的两种方法

    因为robotium要求被测应用和测试代码要有一致的签名, 所以需要将apk包重签名. 方法一:通过re-sign.jar来产生debug key的apk(不适用于jdk 7以上) re-sign.j ...