css3+js 绘制小圆跟随中心圆

最新推荐文章于 2024-08-09 14:33:13 发布

说学逗唱攻城狮

最新推荐文章于 2024-08-09 14:33:13 发布

阅读量448

点赞数

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_34720531/article/details/120785471

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

本文介绍了一个基于协同云平台的智能化办公系统，包括办文易、办会易、办事易等多个模块，旨在提升政府工作的效率和便捷性。系统通过定时切换展示各项功能，如公文互通、会议管理、审批流程等，并辅以详细的说明文字，实现数字化办公的全面覆盖。

摘要由CSDN通过智能技术生成

围绕中心圆画图，左边各大办公设置为定时旋转，每5秒进行切换，最右边显示相对应的说明文字。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<style>
			.section  {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				height: 100%;
				background: linear-gradient(#2196f3, #2196f359);
			}
			.office-introduction {
				height: 100%;
				margin: auto;
				overflow: hidden;
				position: relative;
				padding-top: 76px;
			}
			
			.office-introduction .office-left,
			.office-introduction .office-rigth {
				display: inline-block;
				position: absolute;
				right: 0;
				top: 34%;
				width: 43%;
				height: auto;
				text-align: right;
			}
			
			.office-left p {
				color: #fff;
				font-family: "Microsoft YaHei";
			}
			
			.office-sys-intro {
				font-size: 22px;
				text-align: left;
				line-height: 42px;
				letter-spacing: 4px;
				text-indent: 2em;
			}
			.office-value {
				display: none;
			}
			
			.office-introduction .office-rigth {
				top: -20%;
				position: relative;
				width: auto;
				top: 48%;
				right: 0;
				left: 32%;
				cursor: pointer;
			}
			.office-rigth .dot {
				position: absolute;
				height: 240px;
				width: 240px;
				text-align: center;
				line-height: 240px;
				border-radius: 50%;
				border: 2px solid #f5f5f5;
				color: #fff;
				font-weight: 550;
				font-size: 22px;
				letter-spacing: 4px;
			}
			
			.office-rigth .circle {
				position: absolute;
				z-index: 1;
				width: 120px;
				height: 120px;
				text-align: center;
				line-height: 120px;
				border-radius: 50%;
				border: 1px solid #f5f5f5;
				color: #fff;
				font-weight: 550;
				font-size: 16px;
				letter-spacing: 2px;
				transition: all 1s;
			}
			.office-rigth .circle span {
				position: relative;
				z-index: 2;
			}
			 @keyframes living {
				0%{
					transform: scale(1);
					opacity: 0.5;  
				}
				50%{
					transform: scale(1.5);  
					opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
				}
				100%{
					transform: scale(1);
					opacity: 0.5;
				}
			}
			.circle.add-active::before {
				display: inline-block;
				content: '';
				position: absolute;
				width: 120px;
				height: 120px;
				left: 0;
				bottom: 0;
				background: #fff;
				border-radius: 50%;
				-webkit-animation: living 5s linear infinite; 
				z-index: 0;
			}
			.circle.add-active::after {
				display: inline-block;
				content: '';
				position: absolute;
				width: 120px;
				height: 120px;
				left: 0;
				bottom: 0;
				background: #fff;
				border-radius: 50%;
				-webkit-animation-delay: 5s; /*第二个span动画延迟1.5秒*/ 
			}
			
			.add-active {
				color: #007AFF !important;
				background-color: #f5f5f5;
			}
			
		</style>
				
			<div class="section">
				<div class="office-introduction">
					<div class="office-rigth">
						<div class="dot">协同云平台</div>
						<div class="circle add-active" data-index="1"><span>办文易</span></div>
						<div class="circle" data-index="2"><span>办会易</span></div>
						<div class="circle" data-index="3"><span>办事易</span></div>
						<div class="circle" data-index="4"><span>审批易</span></div>
						<div class="circle" data-index="5"><span>查询易</span></div>
						<div class="circle" data-index="6"><span>出差易</span></div>
						<div class="circle" data-index="7"><span>共享易</span></div>
						<div class="circle" data-index="8"><span>沟通易</span></div>
					</div>
					<div class="office-left">
						<div class="office-value" data-index="1" style="display: inline-block;">
							<p class="office-sys-intro">实现省、市、区、县、镇、村五级公文互通和全流程跟踪的数字化办公。</p>
						</div>
						<div class="office-value" data-index="2">
							<p class="office-sys-intro">实现会议全流程的有效管理，把会议全程、智能、高效的办好。</p>
						</div>
						<div class="office-value" data-index="3">
							<p class="office-sys-intro">实现政府工作人员办事的高效、快捷，包括个人报销、申请出境、借阅图书、个人申报等。</p>
						</div>
						<div class="office-value" data-index="4">
							<p class="office-sys-intro">实现各个审批岗位通过一个入口进行审批。严格管理合规性和时限性，大大提高审批效率。</p>
						</div>
						<div class="office-value" data-index="5">
							<p class="office-sys-intro">有效解决工作人员查阅公文或类似“政务百科”信息的搜索查询。</p>
						</div>
						<div class="office-value" data-index="6">
							<p class="office-sys-intro">通过“差旅助理”为公务人员提供便利的出差服务，如出差日程、电子发票、自动报销管理等。</p>
						</div>
						<div class="office-value" data-index="7">
							<p class="office-sys-intro">基于信任和交换服务体系，实现本部门内和跨部门的授权共享。</p>
						</div>
						<div class="office-value" data-index="8">
							<p class="office-sys-intro">实现公务人员之间的信息、文件收发等功能，方便日常的工作交流和协作。</p>
						</div>
					</div>
				</div>
			</div>
			
			<script src="js/jquery-3.5.1.min.js"></script>
			<script>
					var radius=100;
				//圆心角均分12份
				var avd=360/$(".circle").length;
				//每份圆心角对应的弧长
				var ahd=avd*Math.PI/180;
				$(".circle").each(function(index,element){
					$(this).css({"left":Math.sin((ahd*index))*radius,"top":Math.cos((ahd*index))*radius});
				});
				$(function() {
					// 设置鼠标悬停清除定时器
					$('.circle').hover(function() {
						$(this).addClass('add-active').siblings().removeClass('add-active');
						var _Ele = $(this).data();
						var _value = $('.office-value').data();
						$(".office-value[data-index="+_Ele.index+"]").show().addClass('fadeInUp').siblings().hide();
						clearInterval(tmp);
					});
					// 设置定时器，自动旋转
					var i = 1, t = $('.office-value').length, j = 1, r = $('.circle').length, tmp = setInterval(function(){
						$('.office-value').hide().eq(i > t-1 ? i = 1 : i++).fadeIn(1000);
						$('.circle').removeClass('add-active').eq(j > r-1 ? j = 1 : j++).addClass('add-active');
					}, 5000);
					// 中心点横坐标
					var dotLeft = ($(".office-rigth").width() - $(".dot").width()) / 2 ;
					// 中心点纵坐标
					var dotTop = ($(".office-rigth").height() - $(".dot").height()) / 2 ;
					// 起始角度
					var stard = 0;
					// 半径
					var radius = 240;
					// 每一个BOX对应的角度;
					var avd = 360 / $(".circle").length;
					// 每一个BOX对应的弧度;
					var ahd = avd * Math.PI / 180;
					// 设置圆的中心点的位置
					$(".dot").css({"left": dotLeft-50, "top": dotTop-50});
					$(".circle").each(function (index, element) {
						$(this).css({
							"left": Math.sin((ahd * index)) * radius + dotLeft,
							"top": Math.cos((ahd * index)) * radius + dotTop
						});
					});
				});
			</script>
	</body>
</html>