h5画圆
下面一段代码是，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">要画的 ...
随机推荐
- C++软件工程师，你该会什么？
请尊重原创: 转载注明来源 原创在这里哦 C语言广泛用于基础软件.桌面系统.网络通信.音频视频.游戏娱乐等诸多领域.是世界上使用最广泛的编程语言之一.随着物联网技术的发展,C/C++技术在3G网络 ...
- ubuntu 下编译安装ceph
git clone --recursive https://github.com/ceph/ceph.git cd ceph/ sudo apt-get install libtool sud ...
- vue-router 获得上一级路由以及返回上一级路由的方法
if (this.$store.state.previousRouter.name) { this.$router.push({name: this.$store.state.previousRout ...
- C++之虚函数与虚继承详解
准备工作 1.VS2012使用命令行选项查看对象的内存布局 微软的Visual Studio提供给用户显示C++对象在内存中的布局的选项:/d1reportSingleClassLayout.使用方法 ...
- C++之remove和remove_if
一.Remove()函数 remove(beg,end,const T& value) //移除区间{beg,end)中每一个“与value相等”的元素: remove只是通过迭代器的指针向前 ...
- rsync（三）算法原理和工作流程分析
在开始分析算法原理之前,简单说明下rsync的增量传输功能. 假设待传输文件为A,如果目标路径下没有文件A,则rsync会直接传输文件A,如果目标路径下已存在文件A,则发送端视情况决定是否要传输文件A ...
- CSS：CSS 颜色名
ylbtech-CSS:CSS 颜色名 1.返回顶部 1. CSS 颜色名 所有浏览器都支持的颜色名. HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色 ...
- 【原】Cache Buffer Chain 第四篇
作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/p/3873357.html [测试1]低 ...
- no more URLs to fetch
Generator: records selected for fetching, exiting ... Stopping at depth= - no more URLs to fetch. 出现 ...
- Flutter实战视频-移动电商-41.详细页_数据接口的调试
41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...