纯css画饼状图

最新推荐文章于 2024-03-12 20:24:21 发布
最新推荐文章于 2024-03-12 20:24:21 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45264424/article/details/119326214
版权

一、饼图
在这里插入图片描述

<div class="pie"></div>

.pie {
    width:100px;
    height:100px;
    border-radius:50%;
    background: yellowgreen;
    background-image: linear-gradient(toright,transparent 50%,#655 0);
}
 
.pie::before {
    content:'';
    display:block;
    margin-left:50%;
    height:100%;
    border-radius:0 100% 100% 0/50%;
    background-color: inherit;
    transform-origin:left;
    transform: rotate(.2turn);
}

二、环形图
在这里插入图片描述

<div class="loading">
    <div class="left"></div>
    <div class="right"></div>
    <div class="progress">85%</div>
</div>
 
 
.loading {
    margin:100px auto;
    width:8em;
    height:8em;
    position:relative;
}
 
.loading .progress {
    position:absolute;
    width:6em;
    height:6em;
    background-color:white;
    border-radius:50%;
    left:1em;
    top:1em;
    line-height:6em;
    text-align:center;
}
 
.left,
.right {
    width:4em;
    height:8em;
    overflow:hidden;
    position:relative;
    float:left;
    background-color:#999999
}
 
.left {
    border-radius:8em 0 0 8em;
}
 
.right {
    border-radius:0 8em 8em 0;
}
 
.left:after,
.right:after {
    content:"";
    position:absolute;
    display:block;
    width:4em;
    height:8em;
    background-color:white;
    border-radius:8em 0 0 8em;
    background-color:red;
}
 
.right:after {
    content:"";
    position:absolute;
    display:block;
    border-radius:0 8em 8em 0;
}
.left:after {
    transform-origin:right center;
}
 
.right:after {
    transform-origin:left center;
    transform: rotateZ(45deg);
}

demo：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.loading {
			margin: 100px auto;
			width: 8em;
			height: 8em;
			position: relative;
		}

		.loading .progress {
			position: absolute;
			width: 6em;
			height: 6em;
			background-color: white;
			border-radius: 50%;
			left: 1em;
			top: 1em;
			line-height: 6em;
			text-align: center;
		}

		.left,
		.right {
			width: 4em;
			height: 8em;
			overflow: hidden;
			position: relative;
			float: left;
			background-color: #999999
		}

		.left {
			border-radius: 8em 0 0 8em;
		}

		.right {
			border-radius: 0 8em 8em 0;
		}

		.left:after,
		.right:after {
			content: "";
			position: absolute;
			display: block;
			width: 4em;
			height: 8em;
			background-color: white;
			border-radius: 8em 0 0 8em;
			background-color: red;
		}

		.right:after {
			content: "";
			position: absolute;
			display: block;
			border-radius: 0 8em 8em 0;
		}

		.left:after {
			transform-origin: right center;
			transform:var(--leftRotate);
		}

		.right:after {
			transform-origin: left center;
			/* transform: rotateZ(45deg); */
			transform: var(--rightRotate);
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="loading">
			<div class="left" :style="{'--leftRotate': 'rotateZ(0deg)'}"></div>
			<div class="right" :style="{'--rightRotate': 'rotateZ(90deg)'}"></div>
			<div class="progress">85%</div>
		</div>
		<div class="loading">
			<!-- if(x>50){
					rightRotate=0
					leftRotate=3.6*x
				}else{
					rightRotate=(x-50)*3.6
					leftRotate=180
				} -->
			<div class="left" :style="{'--leftRotate': 'rotateZ(90deg)'}"></div>
			<div class="right" :style="{'--rightRotate': 'rotateZ(180deg)'}"></div>
			<div class="progress">85%</div>
		</div>

	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {

			},
			created() {
            console.log(0.85*360)
			},
		})
	</script>
</body>

</html>
前端老实人灬
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现饼图、环形图（百分比）
weixin_30346033的博客
05-08 2430
一、饼图 .pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); } .pie::be...
css实现饼状图
热门推荐
小圣贤君的博客
09-08 1万+
有一些网页中,有时候会碰到饼状图的需求，比如统计图表，进度指示器，定时器等，实现方式也是各种各样，现在也有不少现成的js库，可以直接拿来使用，方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。<div class="pie"></div>.pie { width: 100px; height: 100px; border-radius: 50%; back
css画饼图
程序媛的博客
12-14 593
使用css画饼图
css3 数据图形之——饼状图的实现(圆弧的终点坐标)
qq_34464415的博客
09-14 1624
css3 数据图形之——饼状图的实现(圆弧的终点坐标) css3 数据图形之——饼状图的实现 大家知道web页的数据图表基本上都是由canvas或svg配合javaScript来实现。 图形表大致有 饼图、雷达图、对比图、折线图、条形图、曲线图、面积图、柱形图、圆环图、气泡图 在这之前，我们先了解一下用css制作图形的几种方法 。 clip-path 裁剪路径 border三角形 利用line...
css+html实现的饼图百分比
ICode联盟
10-28 235
下载地址css+html实现的百分比饼图样式，没有使用任何js代码。dd:
css 实现饼图和环形图
最新发布
qq_38779317的博客
03-12 427
【代码】css 实现饼图和环形图。
用CSS画饼图
09-08
用CSS绘制饼图，针对移动端上的展示，建议在谷歌浏览器上打开效果更佳,上传了两个html文件，pie.html是css静态画饼图，pieAuto.html是用我自己写的插件可以根据传入的参数动态绘制饼图
纯CSS实现图片前后翻页效果
01-23
总结来说，纯CSS实现的图片前后翻页效果主要依赖于CSS3的关键帧动画和3D变换功能。通过合理布局HTML元素和设置相应的CSS样式，我们可以创建出流畅、逼真的翻页效果，同时保持代码简洁，提升网页性能。这对于想要优化...
HTML 纯CSS下划线出现动画
03-05
HTML 纯CSS下划线出现动画
纯css动画效果520表白信封
05-20
资源基于博主https://blog.csdn.net/weixin_44009656?type=blog的文章内容修改，感谢博主提供的优质资源，我上传的版本修复了页面初始化的时候信封触发关闭动画的问题。
CSS实现饼图效果
08-09
使用纯CSS实现的饼状图，可按照自己的需求进行修改，代码较简单
动态实现饼图
05-09
基于HTML5 JS CSS等的一个动态饼图 实现动画效果
纯css3绘制美女油画动画特效
07-28
本项目“纯css3绘制美女油画动画特效”充分利用了CSS3的特性，展示了如何利用纯CSS技术创建引人入胜的视觉效果，特别是将静态的图像转化为具有动态感的美女油画动画。 首先，我们要理解CSS3中的关键帧动画（@...
如何仅使用 CSS 和 HTML 构建交互式饼图
分享身边生活经验blog
04-07 391
您可以通过在自己的饼图或数据集中包含其他功能或使用不同的值来构建新获得的知识。如果您不想将鼠标悬停在它上面，还有一个额外的选择——按键让您知道哪种食物的百分比是多少。最后，当您单击不同的键时，其他的都是 12.5%，因此我们需要使用其他样式创建它们的形状。但如果这不是您想要的 - 或者您不想向项目添加其他库 - 您可以从头开始构建它们仅使用 HTML 和 CSS。因此，我们作为开发人员有时被要求在我们的项目中在这里或那里实现饼图，这不应该太令人惊讶。让我们设置它的样式，使其看起来像我们都熟悉的饼图。
纯css3实现饼状图-------Day21
麦田里
05-30 1万+
现代网站在商务应用中比较广泛
【web开发 css制作饼图】用css和svg制作多种颜色构成的饼图
晚秋星辰
10-29 3171
【周记-web前端css开发】用css和svg制作多种颜色构成的饼图 最近在看Lea Verou写的《揭秘css》，有很多css小技巧以及解决常见问题的技术确实让人受益匪浅，值得一读。对于饼图，虽然最简单的只有两种颜色，但是实现起来并不方便，这本书讲述了利用变换的方法实现饼图，但更好的方法是用svg和css配合，实现起来便捷维护简单，网上也有这篇文章，这篇文章详细讲解了如何制作两种颜色的饼图，那
使用 HTML CSS JS 制作动画饼图能力和后台数据展现-id1073-网站前端设计
zwxic的博客
09-28 339
使用 HTML CSS JS 制作动画饼图能力和后台数据展现-id1073-网站前端设计 源码下载地址 在新演示地址 html css <!doctype html> <html> <head> <title> About</title> <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
html超百分比圆形图,纯CSS实现饼图、环形图（百分比）
weixin_35728532的博客
06-16 2206
一、饼图 .pie {width: 100px;height: 100px;border-radius: 50%;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::before {content: '';display: block;margin-l...
css画饼状图圆形,CSS样式圆形饼图百分比
weixin_42123237的博客
08-03 1077
更新记录1.0.0(2021-07-27)简单的CSS样式圆形饼图百分比平台兼容性VueApp微信小程序支付宝小程序百度小程序字节小程序QQ小程序快应用vue23.1.0 app-vue√×××××H5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxPC-Safari√√√√√××××css圆形饼图百分比突然...
纯css3怎么实现轮播图动画
04-26
你可以使用CSS3中的transition和transform属性来实现轮播图动画。具体实现方法如下： 1. 定义一个容器，包含多张图片，并设置宽度和高度。 2. 设置图片的样式，比如设置宽度、高度、边框等。 3. 使用CSS3中的transition属性设置图片的过渡效果，比如设置过渡时间、过渡类型等。 4. 使用CSS3中的transform属性设置需要移动的距离，比如通过translateX()函数来实现平移效果。 5. 使用CSS3中的动画关键帧来定义多个移动状态，实现动画循环播放效果。 代码示例： HTML代码： ``` <div class="slider"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> </div> ``` CSS代码： ``` .slider { width: 600px; height: 300px; overflow: hidden; position: relative; } .slider img { width: 600px; height: 300px; float: left; } .slider img:first-child { margin-left: 0; } .slider img:last-child { margin-left: -1800px; } .slider img:hover { cursor: pointer; } .slider img:hover + img { margin-left: -600px; transition: margin-left 1s; } .slider img:hover + img + img { margin-left: -1200px; transition: margin-left 1s; } .slider img:hover + img + img + img { margin-left: -1800px; transition: margin-left 1s; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-600px); } } .slider img { animation: slide 2s linear infinite; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值