下面一段代码是，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画圆的更多相关文章
-
H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入
一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...
-
canvas入门（画圆）
1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas> 接着需 ...
-
WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...
-
《图形学》实验六：中点Bresenham算法画圆
开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...
-
ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...
-
【openGL】画圆
#include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...
-
javascript画直线和画圆的方法（非HTML5的方法）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介
[液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...
-
在AE中通过指定中心点和半径画圆
/// <summary>/// 通过指定的中心点.半径画圆/// </summary>/// <param name="pLayer">要画的 ...
随机推荐
-
Github上安卓榜排名第2的程序员教你如何学习【转载，侵删】
来自:峰瑞资本(微信号:freesvc)文章作者:代码家(微信 ID:daimajia_share) 软件早已吞噬整个世界,程序员是关键角色.过去 40 年中,许多伟大的公司都由程序员缔造,比如比尔· ...
-
C# 中的IOCP线程池
原文地址:http://www.theukwebdesigncompany.com/articles/iocp-thread-pooling.php PartOne : Introduction 当使 ...
-
JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
-
android JNI （二） 第一个 android工程
下载NDK 后 它自带有 sample,初学者 可以导入Eclipse 运行 这里 我是自己创建的一个新工程 第一步: 新建一个Android工程 jni_test(名字自取) 第二步:为工程添加 本 ...
-
ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能
首先放出该插件的下载地址:http://pan.baidu.com/s/1Aa3yD,里面有帮助文档,详细了解可以自行下载学习,本章只讲解一些基本的验证功能,页面代码如下: <%@ Page L ...
-
B树的查找、插入、删除（附源代码）
B-Tree Index B-Tree搜索 B-Tree插入 分裂节点 插入节点 B-Tree删除 合并节点 删除节点 Basic B-Tree有两个比较重要的性质: 所有的leaf均在同一个leve ...
-
Python代码运行助手
将下述demo文件保存下来,比如存为learning.py 然后运行,如果出现: Ready for Python code on port 39093... 则说明成功了. demo #!/usr/ ...
-
反射Dll注入分析
(源码作者:(HarmanySecurity)Stephen Fewer) 0x01 反射Dll注入的优点 1.反射Dll注入的主要优点是它没有以主机系统的任何方式(例如LoadLibrary和L ...
-
异常:Caused by: java.sql.SQLException: Field &#39;cust_id&#39; doesn&#39;t have a default value
异常: 由Java.q.L.SqLExpExt引起:字段“CuSTyID”没有默认值 Caused by: java.sql.SQLException: Field 'cust_id' doesn't ...
-
创建emlog
第一步:解压安装包并且安装 第二步:打开phpstudy,并启动(如果安装后打开显示没有VC11,则要去安装) 第三步:打开“其他管理项菜单”下面的“根目录”,将emlog下面的emlog之下的全部文 ...