css3每月销售统计图表ui特效代码下载


css3每月销售统计图表ui特效代码下载
css3每月销售统计图表ui特效代码下载以及每月销售、统计图表ui等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

	<div class="main-container">
		<div class="year-stats">
			<div class="month-group">
				<div class="bar h-100"></div>
				<p class="month">一月</p>
			</div>
			<div class="month-group">
				<div class="bar h-50"></div>
				<p class="month">二月</p>
			</div>
			<div class="month-group">
				<div class="bar h-75"></div>
				<p class="month">三月</p>
			</div>
			<div class="month-group">
				<div class="bar h-25"></div>
				<p class="month">四月</p>
			</div>
			<div class="month-group selected">
				<div class="bar h-100"></div>
				<p class="month">五月</p>
			</div>
			<div class="month-group">
				<div class="bar h-50"></div>
				<p class="month">六月</p>
			</div>
			<div class="month-group">
				<div class="bar h-75"></div>
				<p class="month">七月</p>
			</div>
			<div class="month-group">
				<div class="bar h-25"></div>
				<p class="month">八月</p>
			</div>
			<div class="month-group">
				<div class="bar h-50"></div>
				<p class="month">九月</p>
			</div>
			<div class="month-group">
				<div class="bar h-75"></div>
				<p class="month">十月</p>
			</div>
			<div class="month-group">
				<div class="bar h-25"></div>
				<p class="month">十一月</p>
			</div>
			<div class="month-group">
				<div class="bar h-100"></div>
				<p class="month">十二月</p>
			</div>
		</div>
		<div class="stats-info">
			<div class="graph-container">
				<div class="percent">
					<svg viewBox="0 0 36 36" class="circular-chart">
						<path class="circle" stroke-dasharray="100, 100" d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831" />
						<path class="circle" stroke-dasharray="85, 100" d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831" />
						<path class="circle" stroke-dasharray="60, 100" d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831" />
						<path class="circle" stroke-dasharray="30, 100" d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831" />
					</svg>
				</div>
				<p>总销售: $2075</p>
			</div>
			<div class="info">
				<p>Most expensive category <br /><span>Restaurants & Dining</span></p>
				<p>Updated categories <span>2</span></p>
				<p>Bonus payments <span>$92</span></p>
			</div>
		</div>
	</div>

相关推荐

发表评论

相关文章