3DHTML画圈

最新推荐文章于 2021-05-31 03:31:54 发布
最新推荐文章于 2021-05-31 03:31:54 发布
阅读量167 收藏
点赞数
分类专栏： S1

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.ooo.com</title>

<style>
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.circle {
  width: 100px;
  height: 100px;
}
.circle:nth-child(1) {
  -webkit-transform: rotate(30deg) translate(80px);
          transform: rotate(30deg) translate(80px);
}
.circle:nth-child(2) {
  -webkit-transform: rotate(60deg) translate(80px);
          transform: rotate(60deg) translate(80px);
}
.circle:nth-child(3) {
  -webkit-transform: rotate(90deg) translate(80px);
          transform: rotate(90deg) translate(80px);
}
.circle:nth-child(4) {
  -webkit-transform: rotate(120deg) translate(80px);
          transform: rotate(120deg) translate(80px);
}
.circle:nth-child(5) {
  -webkit-transform: rotate(150deg) translate(80px);
          transform: rotate(150deg) translate(80px);
}
.circle:nth-child(6) {
  -webkit-transform: rotate(180deg) translate(80px);
          transform: rotate(180deg) translate(80px);
}
.circle:nth-child(7) {
  -webkit-transform: rotate(210deg) translate(80px);
          transform: rotate(210deg) translate(80px);
}
.circle:nth-child(8) {
  -webkit-transform: rotate(240deg) translate(80px);
          transform: rotate(240deg) translate(80px);
}
.circle:nth-child(9) {
  -webkit-transform: rotate(270deg) translate(80px);
          transform: rotate(270deg) translate(80px);
}
.circle:nth-child(10) {
  -webkit-transform: rotate(300deg) translate(80px);
          transform: rotate(300deg) translate(80px);
}
.circle:nth-child(11) {
  -webkit-transform: rotate(330deg) translate(80px);
          transform: rotate(330deg) translate(80px);
}
.circle:nth-child(12) {
  -webkit-transform: rotate(360deg) translate(80px);
          transform: rotate(360deg) translate(80px);
}
.circle:nth-child(13) {
  -webkit-transform: rotate(16.36364deg) translate(180px);
          transform: rotate(16.36364deg) translate(180px);
}
.circle:nth-child(14) {
  -webkit-transform: rotate(32.72727deg) translate(180px);
          transform: rotate(32.72727deg) translate(180px);
}
.circle:nth-child(15) {
  -webkit-transform: rotate(49.09091deg) translate(180px);
          transform: rotate(49.09091deg) translate(180px);
}
.circle:nth-child(16) {
  -webkit-transform: rotate(65.45455deg) translate(180px);
          transform: rotate(65.45455deg) translate(180px);
}
.circle:nth-child(17) {
  -webkit-transform: rotate(81.81818deg) translate(180px);
          transform: rotate(81.81818deg) translate(180px);
}
.circle:nth-child(18) {
  -webkit-transform: rotate(98.18182deg) translate(180px);
          transform: rotate(98.18182deg) translate(180px);
}
.circle:nth-child(19) {
  -webkit-transform: rotate(114.54545deg) translate(180px);
          transform: rotate(114.54545deg) translate(180px);
}
.circle:nth-child(20) {
  -webkit-transform: rotate(130.90909deg) translate(180px);
          transform: rotate(130.90909deg) translate(180px);
}
.circle:nth-child(21) {
  -webkit-transform: rotate(147.27273deg) translate(180px);
          transform: rotate(147.27273deg) translate(180px);
}
.circle:nth-child(22) {
  -webkit-transform: rotate(163.63636deg) translate(180px);
          transform: rotate(163.63636deg) translate(180px);
}
.circle:nth-child(23) {
  -webkit-transform: rotate(180deg) translate(180px);
          transform: rotate(180deg) translate(180px);
}
.circle:nth-child(24) {
  -webkit-transform: rotate(196.36364deg) translate(180px);
          transform: rotate(196.36364deg) translate(180px);
}
.circle:nth-child(25) {
  -webkit-transform: rotate(212.72727deg) translate(180px);
          transform: rotate(212.72727deg) translate(180px);
}
.circle:nth-child(26) {
  -webkit-transform: rotate(229.09091deg) translate(180px);
          transform: rotate(229.09091deg) translate(180px);
}
.circle:nth-child(27) {
  -webkit-transform: rotate(245.45455deg) translate(180px);
          transform: rotate(245.45455deg) translate(180px);
}
.circle:nth-child(28) {
  -webkit-transform: rotate(261.81818deg) translate(180px);
          transform: rotate(261.81818deg) translate(180px);
}
.circle:nth-child(29) {
  -webkit-transform: rotate(278.18182deg) translate(180px);
          transform: rotate(278.18182deg) translate(180px);
}
.circle:nth-child(30) {
  -webkit-transform: rotate(294.54545deg) translate(180px);
          transform: rotate(294.54545deg) translate(180px);
}
.circle:nth-child(31) {
  -webkit-transform: rotate(310.90909deg) translate(180px);
          transform: rotate(310.90909deg) translate(180px);
}
.circle:nth-child(32) {
  -webkit-transform: rotate(327.27273deg) translate(180px);
          transform: rotate(327.27273deg) translate(180px);
}
.circle:nth-child(33) {
  -webkit-transform: rotate(343.63636deg) translate(180px);
          transform: rotate(343.63636deg) translate(180px);
}
.circle:nth-child(34) {
  -webkit-transform: rotate(360deg) translate(180px);
          transform: rotate(360deg) translate(180px);
}
.circle:nth-child(35) {
  -webkit-transform: rotate(11.25deg) translate(280px);
          transform: rotate(11.25deg) translate(280px);
}
.circle:nth-child(36) {
  -webkit-transform: rotate(22.5deg) translate(280px);
          transform: rotate(22.5deg) translate(280px);
}
.circle:nth-child(37) {
  -webkit-transform: rotate(33.75deg) translate(280px);
          transform: rotate(33.75deg) translate(280px);
}
.circle:nth-child(38) {
  -webkit-transform: rotate(45deg) translate(280px);
          transform: rotate(45deg) translate(280px);
}
.circle:nth-child(39) {
  -webkit-transform: rotate(56.25deg) translate(280px);
          transform: rotate(56.25deg) translate(280px);
}
.circle:nth-child(40) {
  -webkit-transform: rotate(67.5deg) translate(280px);
          transform: rotate(67.5deg) translate(280px);
}
.circle:nth-child(41) {
  -webkit-transform: rotate(78.75deg) translate(280px);
          transform: rotate(78.75deg) translate(280px);
}
.circle:nth-child(42) {
  -webkit-transform: rotate(90deg) translate(280px);
          transform: rotate(90deg) translate(280px);
}
.circle:nth-child(43) {
  -webkit-transform: rotate(101.25deg) translate(280px);
          transform: rotate(101.25deg) translate(280px);
}
.circle:nth-child(44) {
  -webkit-transform: rotate(112.5deg) translate(280px);
          transform: rotate(112.5deg) translate(280px);
}
.circle:nth-child(45) {
  -webkit-transform: rotate(123.75deg) translate(280px);
          transform: rotate(123.75deg) translate(280px);
}
.circle:nth-child(46) {
  -webkit-transform: rotate(135deg) translate(280px);
          transform: rotate(135deg) translate(280px);
}
.circle:nth-child(47) {
  -webkit-transform: rotate(146.25deg) translate(280px);
          transform: rotate(146.25deg) translate(280px);
}
.circle:nth-child(48) {
  -webkit-transform: rotate(157.5deg) translate(280px);
          transform: rotate(157.5deg) translate(280px);
}
.circle:nth-child(49) {
  -webkit-transform: rotate(168.75deg) translate(280px);
          transform: rotate(168.75deg) translate(280px);
}
.circle:nth-child(50) {
  -webkit-transform: rotate(180deg) translate(280px);
          transform: rotate(180deg) translate(280px);
}
.circle:nth-child(51) {
  -webkit-transform: rotate(191.25deg) translate(280px);
          transform: rotate(191.25deg) translate(280px);
}
.circle:nth-child(52) {
  -webkit-transform: rotate(202.5deg) translate(280px);
          transform: rotate(202.5deg) translate(280px);
}
.circle:nth-child(53) {
  -webkit-transform: rotate(213.75deg) translate(280px);
          transform: rotate(213.75deg) translate(280px);
}
.circle:nth-child(54) {
  -webkit-transform: rotate(225deg) translate(280px);
          transform: rotate(225deg) translate(280px);
}
.circle:nth-child(55) {
  -webkit-transform: rotate(236.25deg) translate(280px);
          transform: rotate(236.25deg) translate(280px);
}
.circle:nth-child(56) {
  -webkit-transform: rotate(247.5deg) translate(280px);
          transform: rotate(247.5deg) translate(280px);
}
.circle:nth-child(57) {
  -webkit-transform: rotate(258.75deg) translate(280px);
          transform: rotate(258.75deg) translate(280px);
}
.circle:nth-child(58) {
  -webkit-transform: rotate(270deg) translate(280px);
          transform: rotate(270deg) translate(280px);
}
.circle:nth-child(59) {
  -webkit-transform: rotate(281.25deg) translate(280px);
          transform: rotate(281.25deg) translate(280px);
}
.circle:nth-child(60) {
  -webkit-transform: rotate(292.5deg) translate(280px);
          transform: rotate(292.5deg) translate(280px);
}
.circle:nth-child(61) {
  -webkit-transform: rotate(303.75deg) translate(280px);
          transform: rotate(303.75deg) translate(280px);
}
.circle:nth-child(62) {
  -webkit-transform: rotate(315deg) translate(280px);
          transform: rotate(315deg) translate(280px);
}
.circle:nth-child(63) {
  -webkit-transform: rotate(326.25deg) translate(280px);
          transform: rotate(326.25deg) translate(280px);
}
.circle:nth-child(64) {
  -webkit-transform: rotate(337.5deg) translate(280px);
          transform: rotate(337.5deg) translate(280px);
}
.circle:nth-child(65) {
  -webkit-transform: rotate(348.75deg) translate(280px);
          transform: rotate(348.75deg) translate(280px);
}
.circle:nth-child(66) {
  -webkit-transform: rotate(360deg) translate(280px);
          transform: rotate(360deg) translate(280px);
}
.circle .arc {
  border-right: 10px solid #00ff96;
  border-radius: 50%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-animation: arcAnimation 2s linear infinite;
          animation: arcAnimation 2s linear infinite;
}

@-webkit-keyframes arcAnimation {
  100% {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}

@keyframes arcAnimation {
  100% {
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
</style>
</head>
<body>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div class='circle'>
  <div class='arc'></div>
</div>
<div style="text-align:center;">
</div>
</body>
</html>
图标如下

 

ZhuMinde
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5动态画圆（可根据此方法动态处理其他图形）
08-09
在鼠标移动时生成图形，就像QQ截图的椭圆工具
HTML5 canvas性能之画圈
09-10 679
主要讲了HTML5 canvas性能方面的尝试，场景是在canvas上面绘制圆圈。 我一直在尝试使用HTML5 canvas在圣诞树图片上面绘制泡泡。由于不知道哪种绘制的方法最好，最终在Stack Overflow上找到了使用radial gradients（辐射渐变）绘制圆圈的答案。 圆圈 你可能已经知道，标准地画圆圈的方法是使用arc()：分享一个最好用的UI
html画圆圈原理,Html - 圆圈border
weixin_39636850的博客
05-30 206
SharePoint 2013 中的 PowerPoint Automation Services简介 许多大型和小型企业都将其 Microsoft SharePoint Server 库用作 Microsoft PowerPoint 演示文稿的存储库.所有这些企业在 ...诠释Linux中『一切都是文件』概念和相应的文件类型导读 在 Unix 和它衍生的比如 Lin...
Html中圆圈怎么画,css怎么画圆？
weixin_39530960的博客
05-31 4193
css怎么画圆？其实很简单。我们需要使用一个关键属性：border-radius属性来画圆。下面本篇文章就来给大家介绍一下使用CSS border-radius属性画圆的方法，希望对大家有所帮助。首先我们来了解border-radius 属性。border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；可以为元素添加圆角边框。语法：border-radius...
html画圆圈原理,HTML5如何划线和画圆
weixin_35504293的博客
05-30 533
本篇教程探讨了HTML5如何划线和画圆，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();...
HTML3DHTML烟花
07-28
HTML3D烟花，HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D烟花HTML3D...
动态3DHTML5特效
05-30
13款基于SVG的HTML5应用和动画，SVG是HTML的扩展标记语言，利用SVG可以做非常多的矢量动画，结合HTML5，SVG就变得...3、HTML5 SVG小马奔跑动画 相当大气 4、HTML5 SVG多折线图表 图表可缩放显示 5、3D画廊有拉放特效
dhtml.rar_DHTML
09-23
3. **DOM**：DOM是HTML和XML文档的结构化表示，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在DHTML中，通过JavaScript操作DOM，可以实现对网页元素的增删改查，从而实现动态更新页面的效果。 4. **...
DHTML.rar_DHTML
09-24
3. **JavaScript** JavaScript是实现DHTML动态效果的关键。它可以改变HTML元素的内容、属性、样式，甚至创建新的元素。JavaScript提供了丰富的DOM操作接口，使得开发者能够动态地访问和修改网页的结构。例如，通过`...
用时间轴制作DHTML动画
06-22
【时间轴制作DHTML动画】是网页设计中一种动态效果的实现方式，它通过控制页面元素在一定时间内按预设路径展示，以创造出流畅的视觉动画。DHTML（Dynamic HTML）利用时间轴来控制层的位置、大小、可见性和叠放顺序等...
JS + HTML 5 （Canvas） - 画圆饼动画，也是countdown倒计时的简单实现。
巍的博
01-16 7708
代码及结果预览，在 JSFiddle 上：http://jsfiddle.net/ylem/XnsCK/ 代码很简单，给大伙一个范例，其中把 n = 10 修改为 60 就算是简单的倒计时了。 原理一句话，就是 每秒画 step / n 的圆。 如果对canvas画圈不熟的同学可以看这里：http://www.w3school.com.cn/html5/canvas_arc.asp
利用html5标签画圆
z . s . j
06-14 3155
您的浏览器不支持canvas标签   //开始画图,通过javascript画出来   //1得到画布：   var canvas = document.getElementById('myCanvas');   //得到画笔，获得二维的画布   var ctx = canvas.getContext('2d');   //开始画圆   ctx.beginPath();
html轻松画出各种图形，附带解释
u014074697的博客
06-22 9679
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性 CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的
HTML画空心圆
牛奶爱上咖啡的博客
10-16 9783
无标题文档     span{position:absolute; color: red}/*设置颜色*/        //////////////////////////////////////////画空心圆///////////////////////////////////////////// function emptyCircle(){ //    
使用HTML绘制图形
qq_44716544的博客
10-05 1017
利用<canvas width="200" height="200"></canvas>创建画布; 利用var cav=document.getElemeById('mr-cav').getContext('2d'）获得Canvas元素，然后使用Canvas元素的getContext()方法来获得图形上下文。 <!DOCTYPE html> <htm...
简单的特效--css画圆圈
qq_32536863的博客
10-29 942
注释的代码是点击画圈圈，没有注释的是长按画圆圈（ps:是效果） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;⭕&lt;/title&gt;     &lt;!-- 引jQuery文件 路径不要错
HTML画圆，三角形，六边形
L_ZR_1的博客
10-30 4515
画圆：首先建个div，然后把div的宽高设置同样大小，最后把div的边框弧度设为50%；.circleOne{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid blue; } 画三角形：首先建个div，然后把div宽高设为0，再给边框设置大小（根据自己的需
html5_画布绘制绘制实心圆和空心圆
热门推荐
wutrg1502的博客
06-26 1万+
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;绘制实心圆和空心圆&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="myCanvas"
圣诞树代码3dhtml
最新发布
12-25
以下是一个简单的圣诞树的3D HTML代码示例： ```html <!DOCTYPE html> <title>3D Christmas Tree body { background-color: #000; overflow: hidden; } canvas { position: absolute;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值