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">要画的 ...
随机推荐
- 调试windows服务最简单的方法之一
先看一下这段启动代码: using System; using System.Collections.Generic; using System.Linq; using System.ServiceP ...
- vue 表单验证省市县三联动
<el-col :span="24"> <el-form-item label="所在地区" prop="region" ...
- fragment error
error: android.view.InflateException: Binary XML file line #6: Error inflating class fragment 解决办法 ...
- Redis GEO 特性在 LBS 中的应用总结
什么是LBS LBS(Location Based Service),基于位置的服务. Redis和GEO Redis 是最热门的 nosql 数据库之一,它的最大特点就是快.所以在 LBS 这种需要 ...
- CSS:CSS 网络安全字体组合
ylbtech-CSS:CSS 网络安全字体组合 1.返回顶部 1. 常用的字体组合 font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性.如果浏览器 ...
- Flutter实战视频-移动电商-45.详细页_说明区域UI编写
45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/ ...
- Laravel中使用模型对数据进行操作
public function orm(){ //查询表的所有记录 //$user = Admin::all(); //dd($user); //查询某一条记录 //$user = Admin::fi ...
- Apache CXF简介
Apache CXF是一个开源的,全功能的,容易使用的Web服务框架.CXF是由Celtix和XFire合并,在Apache软件基金会共同完成的.CXF的名字来源于"Celtix" ...
- Entity FrameWork 5 增删改查 & 直接调用sql语句 ?
#region 1.0 新增 -void Add() /// <summary> /// 1.0 新增 /// </summary> static void Add() { / ...
- 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content
如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...