当前位置：首页 » 编程语言 » html5圆环

html5圆环

发布时间: 2021-03-14 04:09:14

『壹』哪位兄弟用html5+css3在手机上面做环形菜单的

纯手打。自适应还需楼主自己调试。至于home键功能，，一个fadeIn和fadeOut就可以搞定
<html>
<head>
<title>css3 Draw Hive</title>
</head>
<style type="text/css">
.container{width:800px; height:480px; position:relative; z-index:99;}
-------我是回华丽的分割线---------
不懂可以继答续追问
会给你更好地建议，帮助解决可困难，喂网络知道做贡献

『贰』 html5如何最圆形布局

你是指生成圆角或者圆吗？
一般都是用：border-radius属性。

如果是其他问题，欢迎补充！

『叁』 HTML5中绘制圆形，请问以下两组代码一样，为何一个能显示圆形，一个不能本人一个小时都没琢磨出来。

第一个<canvas id="one" width="800" height="600">

第二个<canvas id="canvas" width="800" height="600">

这就是区别！

所以第一组的var canvas=document.getElementById('canvas');

也要相应改为var canvas=document.getElementById('one');

这样就OK了

『肆』 html5画布，画出一个矩形中内嵌一个圆形，求源代码（图形颜色无所谓）

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="#FF6699";
ctx.fillRect(0,0,200,200);
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>

『伍』 css画圆，如何用纯css实现一个动态画圆环效

给你一个例子：

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>css动画</title>
<style>
*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0;
}
:root,html,body{
font-family:'PoiretOne','OpenSans','HelveticaNeue','Helvetica','Arial',sans-serif;
background:#222;
color:white;
}
h1{
text-align:center;
margin:1remauto2rem;
font-weight:normal;
}
p{
margin:1rem;
}
.row{
width:80%;
height:150px;
margin:2remauto;
}
.cell{
display:inline-block;
width:49%;
text-align:center;
}
.circle{
display:inline-block;
width:100px;
height:100px;
border-radius:50%;
background:whiteSmoke;
box-shadow:4px-40px60px5pxrgb(26,117,206)inset;
}
.square{
display:inline-block;
width:100px;
height:100px;
border-radius:20px;
background:whiteSmoke;
box-shadow:4px-40px60px5pxrgb(26,117,206)inset;
}
.loader{
background:linear-gradient(toright,rgb(22,113,202)50%,transparent50%);
animation:spin1sinfinitelinear;
}
.loader:before{
display:block;
content:'';
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90px;
height:90px;
background:#222;
border-radius:50%;
}
.gelatine{
animation:gelatine0.5sinfinite;
}
@keyframesgelatine{
from,to{transform:scale(1,1);}
25%{transform:scale(0.9,1.1);}
50%{transform:scale(1.1,0.9);}
75%{transform:scale(0.95,1.05);}
}
.spin{
animation:spin1sinfinitelinear;
}
@keyframesspin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.elastic-spin{
animation:elastic-spin1sinfiniteease;
}
@keyframeselastic-spin{
from{transform:rotate(0deg);}
to{transform:rotate(720deg);}
}
.pulse{
animation:pulse1sinfiniteease-in-outalternate;
}
@keyframespulse{
from{transform:scale(0.8);}
to{transform:scale(1.2);}
}
.flash{
animation:;
}
@keyframesflash{
	from{opacity:1;}	

	to{opacity:0;}
}
.hithere{
animation:hithere1seaseinfinite;
}
@keyframeshithere{
30%{transform:scale(1.2);}
40%,60%{transform:rotate(-20deg)scale(1.2);}
50%{transform:rotate(20deg)scale(1.2);}
70%{transform:rotate(0deg)scale(1.2);}
100%{transform:scale(1);}
}
.grow{
animation:grow2seaseinfinite;
}
@keyframesgrow{
from{transform:scale(0);}
to{transform:scale(1);}
}
.fade-in{
animation:fade-in2slinearinfinite;
}
@keyframesfade-in{
from{opacity:0;}
to{opacity:1;}
}
.fade-out{
animation:fade-out2slinearinfinite;
}
@keyframesfade-out{
from{opacity:1;}
to{opacity:0;}
}
.bounce{
animation:bounce2seaseinfinite;
}
@keyframesbounce{
70%{transform:translateY(0%);}
80%{transform:translateY(-15%);}
90%{transform:translateY(0%);}
95%{transform:translateY(-7%);}
97%{transform:translateY(0%);}
99%{transform:translateY(-3%);}
100%{transform:translateY(0);}
}
.bounce2{
animation:bounce22seaseinfinite;
}
@keyframesbounce2{
	0%,20%,50%,80%,100%{transform:translateY(0);}
	40%{transform:translateY(-30px);}
	60%{transform:translateY(-15px);}
}
.shake{
animation:shake2seaseinfinite;
}
@keyframesshake{
	0%,100%{transform:translateX(0);}
	10%,30%,50%,70%,90%{transform:translateX(-10px);}
	20%,40%,60%,80%{transform:translateX(10px);}
}
.flip{
	backface-visibility:visible!important;
	animation:flip2seaseinfinite;
}
@keyframesflip{
	0%{
		transform:perspective(400px)rotateY(0);
		animation-timing-function:ease-out;
	}
	40%{
		transform:perspective(400px)translateZ(150px)rotateY(170deg);
		animation-timing-function:ease-out;
	}
	50%{
		transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);
		animation-timing-function:ease-in;
	}
	80%{
		transform:perspective(400px)rotateY(360deg)scale(.95);
		animation-timing-function:ease-in;
	}
	100%{
		transform:perspective(400px)scale(1);
		animation-timing-function:ease-in;
	}
}
.swing{
	transform-origin:topcenter;
	animation:swing2seaseinfinite;
}
@keyframesswing{
	20%{transform:rotate(15deg);}	

	40%{transform:rotate(-10deg);}
	60%{transform:rotate(5deg);}	

	80%{transform:rotate(-5deg);}	

	100%{transform:rotate(0deg);}
}
.wobble{
animation:wobble2seaseinfinite;
}
@keyframeswobble{
0%{transform:translateX(0%);}
15%{transform:translateX(-25%)rotate(-5deg);}
30%{transform:translateX(20%)rotate(3deg);}
45%{transform:translateX(-15%)rotate(-3deg);}
60%{transform:translateX(10%)rotate(2deg);}
75%{transform:translateX(-5%)rotate(-1deg);}
100%{transform:translateX(0%);}
}
.fade-in-down{
animation:fade-in-down2seaseinfinite;
}
@keyframesfade-in-down{
0%{
opacity:0;
transform:translateY(-20px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.fade-in-left{
animation:fade-in-left2seaseinfinite;
}
@keyframesfade-in-left{
0%{
opacity:0;
transform:translateX(-20px);
}
100%{
opacity:1;
transform:translateX(0);
}
}
.fade-out-down{
animation:fade-out-down2seaseinfinite;
}
@keyframesfade-out-down{
0%{
opacity:1;
transform:translateY(0);
}
100%{
opacity:0;
transform:translateY(20px);
}
}
.fade-out-right{
animation:fade-out-right2seaseinfinite;
}
@keyframesfade-out-right{
0%{
opacity:1;
transform:translateX(0);
}
100%{
opacity:0;
transform:translateX(20px);
}
}
.bounce-in{
animation:bounce-in2seaseinfinite;
}
@keyframesbounce-in{
0%{
opacity:0;
transform:scale(.3);
}
50%{
opacity:1;
transform:scale(1.05);
}
70%{transform:scale(.9);}
100%{transform:scale(1);}
}
.bounce-in-right{
animation:bounce-in-right2seaseinfinite;
}
@keyframesbounce-in-right{
0%{
opacity:0;
transform:translateX(2000px);
}
60%{
opacity:1;
transform:translateX(-30px);
}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
.bounce-out{
animation:bounce-out2seaseinfinite;
}
@keyframesbounce-out{
0%{transform:scale(1);}
25%{transform:scale(.95);}
50%{
opacity:1;
transform:scale(1.1);
}
100%{
opacity:0;
transform:scale(.3);
}
}
.bounce-out-down{
animation:bounce-out-down2seaseinfinite;
}
@keyframesbounce-out-down{
0%{transform:translateY(0);}
20%{
opacity:1;
transform:translateY(-20px);
}
100%{
opacity:0;
transform:translateY(20px);
}
}
.rotate-in-down-left{
animation:rotate-in-down-left2seaseinfinite;
}
@keyframesrotate-in-down-left{
0%{
transform-origin:leftbottom;
transform:rotate(-90deg);
opacity:0;
}
100%{
transform-origin:leftbottom;
transform:rotate(0);
opacity:1;
}
}
.rotate-in-up-left{
animation:rotate-in-up-left2seaseinfinite;
}
@keyframesrotate-in-up-left{
0%{
transform-origin:leftbottom;
transform:rotate(90deg);
opacity:0;
}
100%{
transform-origin:leftbottom;
transform:rotate(0);
opacity:1;
}
}
.hinge{
animation:hinge2seaseinfinite;
}
@keyframeshinge{
0%{transform:rotate(0);transform-origin:topleft;animation-timing-function:ease-in-out;}
20%,60%{transform:rotate(80deg);transform-origin:topleft;animation-timing-function:ease-in-out;}
40%{transform:rotate(60deg);transform-origin:topleft;animation-timing-function:ease-in-out;}
80%{transform:rotate(60deg)translateY(0);opacity:1;transform-origin:topleft;animation-timing-function:ease-in-out;}
100%{transform:translateY(700px);opacity:0;}
}
.roll-in{
animation:roll-in2seaseinfinite;
}
@keyframesroll-in{
0%{
opacity:0;
transform:translateX(-100%)rotate(-120deg);
}
100%{
opacity:1;
transform:translateX(0px)rotate(0deg);
}
}
.roll-out{
animation:roll-out2seaseinfinite;
}
@keyframesroll-out{
0%{
opacity:1;
transform:translateX(0px)rotate(0deg);
}
100%{
opacity:0;
transform:translateX(100%)rotate(120deg);
}
}
</style>
</head>
<body>
<h1>CSSAnimation</h1>
<divclass="row">
<divclass="cell">
<divclass="circleloader"></div>
<p>loader</p>
</div>
<divclass="cell">
<divclass="circlegelatine"></div>
<p>gelatine</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlespin"></div>
<p>spin</p>
</div>
<divclass="cell">
<divclass="circleelastic-spin"></div>
<p>elasticspin</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlepulse"></div>
<p>pulse</p>
</div>
<divclass="cell">
<divclass="circleflash"></div>
<p>flash</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="squarehithere"></div>
<p>hithere!</p>
</div>
<divclass="cell">
<divclass="circlegrow"></div>
<p>grow</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlefade-in"></div>
<p>fadein</p>
</div>
<divclass="cell">
<divclass="circlefade-out"></div>
<p>fadeout</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlebounce"></div>
<p>bounce</p>
</div>
<divclass="cell">
<divclass="circlebounce2"></div>
<p>bounce2</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circleshake"></div>
<p>shake</p>
</div>
<divclass="cell">
<divclass="circleflip"></div>
<p>flip</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circleswing"></div>
<p>swing</p>
</div>
<divclass="cell">
<divclass="circlewobble"></div>
<p>wobble</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlefade-in-down"></div>
<p>fadeindown</p>
</div>
<divclass="cell">
<divclass="circlefade-in-left"></div>
<p>fadeinleft</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlefade-out-down"></div>
<p>fadeoutdown</p>
</div>
<divclass="cell">
<divclass="circlefade-out-right"></div>
<p>fadeoutright</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlebounce-in"></div>
<p>bouncein</p>
</div>
<divclass="cell">
<divclass="circlebounce-in-right"></div>
<p>bounceinright</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlebounce-out"></div>
<p>bounceout</p>
</div>
<divclass="cell">
<divclass="circlebounce-out-down"></div>
<p>bounceoutdown</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlerotate-in-down-left"></div>
<p>rotateindownleft</p>
</div>
<divclass="cell">
<divclass="circlerotate-in-up-left"></div>
<p>rotateinupleft</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circleroll-in"></div>
<p>rollin</p>
</div>
<divclass="cell">
<divclass="circleroll-out"></div>
<p>rollout</p>
</div>
</div>
<divclass="row">
<divclass="cell">
<divclass="circlehinge"></div>
<p>hinge</p>
</div>
</div>
</body>
</html>

『陆』 html5中写一个圆圈然后再圆圈里面打勾

用svg的path来实现动画最好

『柒』有人会不会用js 或 html 5 写一个圆环 24等分可以点击的就像这样的

<html>
<head>
<title></title>
<style type="text/css">
.content{display: none;}
</style>
</head>
<body>
<span>设为终点</span><span>设为起点</span><span>搜索附近</span>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<script>
var _span=document.getElementsByTagName("span");
var _div=document.getElementsByTagName("div");

for (var i = 0,len=_span.length; i <len; i++) {
_span[i].index=_div[i].index=i;
_span[i].onclick=function(){
var ind=this.index;
if (_div[ind].className=="content") {
for(var j=0;j<len;j++){
_div[j].className="content";
}
_div[ind].className="";
}else{
_div[ind].className="content";
}
}
};
</script>
</body>
</html>

『捌』基于html5的3d 圆形图案怎么处理

代码有点多哦

一、代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<canvas></canvas>
<script src="js/js.js" type="text/javascript"></script>
</body>
</html>

二、CSS代码：
* {
margin: 0;
padding: 0;
border: 0;
background: #000000
}
canvas {
position: relative;
top: 50%;
left: 50%;
margin-left: -50vmin;
width: 100vmin;
height: 100vmin;
overflow: hidden;
display: block;
}
三、JS代码：

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
aaa();
function aaa() {
var a, b, c, d, e, tim, max, x, y, x2, y2, px, py, tx, ty,
r, mc, ms, st, len, gx, gy, gz, yp, yp2, xp, xp2, z;
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
tim = new Date().getTime() / 70;
gz = Math.sin(tim / 31);
gx = Math.sin(tim / 29) / 2;
gy = Math.sin(tim / 37) / 2;
a = tim / 79;
yp = Math.cos(a);
yp2 = Math.sin(a);
a = tim / 77;
xp = Math.cos(a);
xp2 = Math.sin(a);
ty = canvas.height / 2;
tx = canvas.width / 2;
py = 35;
px = py * Math.sin(Math.PI / 3);
for (d = 0; d < 3; d++) {
r = Math.PI * 2 / 3 * d;
mc = Math.cos(r);
ms = Math.sin(r);
for (a = 0; a < 10; a++) {
for (b = 0; b < 10; b++) {
c = 0;
if (b % 2 == 1) c = 0.5;
x = (b) * px + tim * 4;
y = (a + c) * py;
hisi(x, y, d);
}
}
}
d = st;
for (z = 0; z < 10000; z++) {
if (!st) break;
e = d.q;
ctx.beginPath();
for (a = 0; a < e.length; a++) ctx.lineTo(tx + e[a][0] * 140, ty + e[a][1] * 140);
ctx.closePath();
c = "hsl(" + d.c + ",97%," + d.lit + "%)";
ctx.fillStyle = c;
ctx.strokeStyle = c;
ctx.lineWidth = 1;
ctx.fill();
if (!d.tugi) break;
d = d.tugi;
}
function hisi(x, y, col) {
var a, b, c, d, e, x0, y0, x1, y1, z1, p, p1, p2, rx, ry,
r1, r2, myp, myp2, z;
p = [
[x, y],
[x + px / 2, y + py / 4],
[x, y + py / 2],
[x - px / 2, y + py / 4]
];
len = 4;
p1 = [];
for (a = 0; a < 4; a++) {
c = p[a];
d = p[(a + 1) % 4];
for (b = 0; b < len; b++) {
r1 = b / len;
r2 = 1 - r1;
x0 = c[0] * r2 + d[0] * r1;
y0 = c[1] * r2 + d[1] * r1;
p1.push([x0, y0]);
}
}
p = p1;
p2 = [];
for (a = 0; a < p.length; a++) {
x0 = p[a][0];
y0 = p[a][1];
if (col) {
x1 = x0 * mc - y0 * ms;
y1 = x0 * ms + y0 * mc;
x0 = x1;
y0 = y1;
}
rx = (x0 / px / 20) * Math.PI * 2;
ry = (y0 / py / 20) * Math.PI * 2 + tim / 33;
myp = Math.cos(rx);
myp2 = Math.sin(rx);
z = Math.cos(ry) / 2 + 1;
y = Math.sin(ry) / 2;
x = z * myp2;
z = z * myp;
y1 = y * yp + z * yp2;
z1 = y * yp2 - z * yp;
x1 = x * xp + z1 * xp2;
z = x * xp2 - z1 * xp;
z1 = Math.pow(1.4, z + gz);
x = (x1 + gx) * z1;
y = (y1 + gy) * z1;
p2.push([x, y, z]);
}
pp(p2, col);
} //hisi
function pp(q, co) {
var a, b, c, d, e, f, g, h, i, ob, col;
ob = {
q: q,
c: (co * 120 + 55)
};
a = q[2 * len];
b = q[1 * len];
c = q[0];
d = [b[0] - a[0], b[1] - a[1], b[2] - a[2]];
e = [c[0] - b[0], c[1] - b[1], c[2] - b[2]];
h = d[0] * e[1] - d[1] * e[0];
f = d[1] * e[2] - d[2] * e[1];
g = d[2] * e[0] - d[0] * e[2];
if (h < 0) {
h = -h;
f = -f;
g = -g;
i = 1;
}
a = f - g * 0.7 + h * 1.2;
b = Math.abs(f) + Math.abs(h) + Math.abs(g);
a = a / b;
a = a * 25 + 25;
if (a < 10) a = 10;
if (!i) a *= 0.4;
ob.lit = a;
a = (q[0][2] + q[1 * len][2] + q[2 * len][2] + q[3 * len][2]) / 4;
ob.m = a;
if (!st) {
st = ob;
return;
}
b = st;
while (1) {
if (b.m > a) {
if (!b.mae) {
st = ob;
} else {
b.mae.tugi = ob;
}
ob.mae = b.mae;
b.mae = ob;
ob.tugi = b;
break;
}
if (!b.tugi) {
b.tugi = ob;
ob.mae = b;
break;
}
b = b.tugi;
}
}
requestAnimationFrame(aaa);
}

『玖』 web前端 html5 css3 环形进度表怎么实现

public class Utils {
private static long lastClickTime;
public static boolean isFastDoubleClick() {
long time = System.currentTimeMillis();
long timeD = time - lastClickTime;
if ( 0 < timeD && timeD < 500) {
return true;
}

阅读全文

html5圆环

与html5圆环相关的阅读推荐