下面一段代码是，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. dancing link 精确覆盖 重复覆盖 (DLX)

    申明:因为转载的没有给出转载链接,我就把他的链接附上,请尊重原创: http://www.cnblogs.com/-sunshine/p/3358922.html 如果谁知道原创链接 给一下,请尊重原 ...

  2. June 25,2014---->Binder(IPC),Dalvik ,DEX/ODEX

    1.Binder(IPC) Linux进程之间要能够互相通信,从而共享资源和信息.所以,操作系统内核必须提供进程间的通信机制(IPC,Inter-Process Communication). IPC ...

  3. vi编辑器的使用（2）

    1.4 光标移动 vi编辑器中的很多命令都是基于光标当前位置的,因此,如何移动光标定位到所需要的位置是一项十分重要的工作,下面进行详细介绍(如无特别说明,下面所讲的命令都是在普通模式下执行). 1. ...

  4. 第一行代码笔记的思维导图(http://images2015.cnblogs.com/blog/1089110/201704/1089110-20170413160323298-819915364.png)

  5. 配置哨兵监控Redis运行情况

    Redis的主从架构,如果master发现故障了,还得手动将slave切换成master继续服务,手动的方式容易造成失误,导致数据丢失,那Redis有没有一种机制可以在master和slave进行监控 ...

  6. Mike and distribution

    题意: 给定 $n$ 个物品,每个物品有两个属性$a_i$, $b_i$,求一个长度为$[\frac{n}{2}]+1$的子序列 $p$ 使得 $2 * \sum_{i = 1}^{|p|}{a_{p ...

  7. eclispe的使用

    1.eclipse 有的时候,子类包都已经写了,这时候要添加一个父类包,如果在包结构下是添加不了的,这时候需要切换格式:    

  8. 5 手写Java Stack 核心源码

    Stack是Java中常用的数据结构之一,Stack具有"后进先出(LIFO)"的性质. 只能在一端进行插入或者删除,即压栈与出栈 栈的实现比较简单,性质也简单.可以用一个数组来实 ...

  9. Git之通过ssh clone代码

    1.git平台:码云 2.服务器系统:Linux 1.在Linux中创建ssh公钥,将创建的公钥添加到码云的ssh公钥管理 2.一般来说我们配置完站点之后,都会生成一个站点对应的文件夹,进入文件夹,然 ...

  10. HDU2444 【二分图判定+最大匹配】

    套模板很好的题? #include<bits/stdc++.h> using namespace std; const int N=2e2+10; const int M=4e4+10; ...