下面一段代码是，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. Java丨时间判断谁前谁后

    直奔主题: String date_str1 = "2016-06-02 23:03:123"; String date_str2 = "2016-06-03 03:03 ...

  2. hdu-5762 Teacher Bo(抽屉原理+暴力)

    题目链接: Teacher Bo Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  3. bzoj4589

    fwt 原理并不知道 nim游戏石子异或和=0后手赢 那么也就是求a[1]^a[2]^...^a[n]=0的方案数 这个和bzoj3992一样可以dp dp[i][j]表示前i个数异或和为j的方案数 ...

  4. bzoj2959

    lct+并查集 联赛之后忘了很多东西 复习一下 这并不是一棵树,所以我们不能直接上lct 但是把双联通分量缩了以后就是一棵树了 怎么缩呢 就是把splay拆了合并到一个点上 连通性和双联通分量拿两个并 ...

  5. Bean的基于XML配置方式

    基于XML配置 Beans.xml <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns= ...

  6. linux内核中ip，tcp等头的定义(转)

    一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/typedef struct _MAC_FRAME_HEADER{ char m_cDstMacAddress[6];    //目的m ...

  7. 3-C++程序的结构1.2

    对象的生存周期 可以分为静态生存周期和动态生存周期 1.静态生存周期 如果对象的生存期与程序的运行期相同,我们称它具有静态生存期.在文件作用域中声明的对象都具有静态生存期的.如果要在函数的块中声明具有 ...

  8. linux tar命令及解压总结

    把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其 ...

  9. HDU - 1098 - Ignatius's puzzle - ax+by=c

    http://acm.hdu.edu.cn/showproblem.php?pid=1098 其实一开始猜测只要验证x=1的时候就行了,但是不知道怎么证明. 题解表示用数学归纳法,假设f(x)成立,证 ...

  10. C#中var关键字用法分析

    原文连接 本文实例分析了C#中var关键字用法.分享给大家供大家参考.具体方法如下: C#关键字是伴随着.NET 3.5以后,伴随着匿名函数.LINQ而来, 由编译器帮我们推断具体的类型.总体来说,当 ...