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">要画的 ...
随机推荐
- RTMP协议的理解
RTMP协议:real time message protocol 工作原理: 先采集摄像头视频和麦克风音频信息,再进行音视频的编码(mpeg),通过FMLE(Flash Media Live Enc ...
- Vue父子组件间的通信
父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#344 ...
- 使用boost库生成 随机数 随机字符串
#include <iostream> #include <boost/random/random_device.hpp> #include "boost/rando ...
- bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- 三剑客之awk数组实战
shell数组for循环 第一种: #!/bin/sh array=(1 2 3) for i in ${array[*]} do echo $i done 第二种: #!/bin/sh ...
- sip协议呼叫流程详解
1.SIP业务基本知识 1．1 业务介绍会话初始协议(Session Initiation Protocol)是一种信令协议,用于初始.管理和终止网络中的语音和视频会话,具体地说就是用来生成.修改和终 ...
- 2019腾讯广告算法大赛 Rank23
由于官方审核代码,代码将在2019年6月28号后开源 写在前面 这次腾讯的第三届广告算法大赛,是我第一次参加,取得了初赛与复赛均为23名的成绩,毕竟我只是初打比赛不久的小白.我想在此分享下我的基本解题 ...
- Jasper：API / 后向兼容性
ylbtech-Jasper:API / 后向兼容性 1.返回顶部 1. 后向兼容性 为了给客户提供创新的业务解决方案,Cisco Jasper 会定期扩展我们 API 框架的功能.我们会尽最大努力确 ...
- ununtu 下安装 Nvidia 显卡驱动
本人电脑硬件配置:CPU : AMD Athlon(tm) II X2 215 Processor × 2 显示卡 : GeForce 6150SE nForce 430/integrated/SSE ...
- python 之 staticmethod，classmethod，property的区别
绑定方法和非绑定方法: 普通def定义的都是绑定给对象的方法,对象调用时会自动传入对象本事,而类调用时需手动传入对象. 加上@classmethod装饰器就是绑定给类的方法,会自动传类本身 加上@st ...