下面一段代码是，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. bzoj4804

    莫比乌斯反演 我不会推线性筛 留坑

  2. php字符编码转换中的iconv与mb_convert_encoding用法

    iconv ( 'UTF-8' , 'GBK' , $str ); //将$str字符串 utf-8 编码转换成 gbk: 另外,5.4.0 这个版本起,字符非法时候会返回 FALSE,除非在输出字符 ...

  3. QC使用常见问题

    1.如果出现/qcbin/setup_a.cab this file didn’t pass singnature checking. 请下载capicom.dll文件拷贝到c:windowssyst ...

  4. 也谈Flash mmorpg地图问题【转】

    网上看一篇关于目前几个流行flash mmorpg地图实现的分析,这里也想说说自己的一些看法. 常见的三种方式:1.整图2.Tile元素拼装3.栅格化切片 整图 整图加载很好理解直接加载一张背景图.这 ...

  5. bootstrap的tab中，echarts 图表宽度设为100%之后，会出现图表宽带变为100px的情况。只有第一个正常

    1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...

  6. 看后端程序员调试CORS的姿势

    # 目录 为什么有同源策略? 需要解决的问题 CORS跨域请求方案 preflight withCredentials 附:高效.优雅地调试CORS实现 为什么有同源策略?       同源策略Sam ...

  7. 51nod - 1420 - 数袋鼠好有趣 - 贪心 - 二分

    https://www.51nod.com/Challenge/Problem.html#!#problemId=1420 一开始乱搞了一发,每个袋鼠二分找最小的能放它的,然后二分的范围从下一个开始保 ...

  8. MFC——ComBox用法大全

    Combo Box (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项,同时也可以直接在文本框里面输入文本 ...

  9. shader实例（二十二）TexGen-球面贴图SphereMap

    http://blog.sina.com.cn/s/blog_89d90b7c0102vfqz.html 球面贴图一般用于环境反射,如下图(左边为球面贴图,右边为正常贴图),一个镜面水晶球在这只猫的前 ...

  10. Ionic start 创建项目报错

    Installing npm packages... Error with start undefined Error Initializing app: There was an error wit ...