如何制作一个包含动画的带文本的圆环图
How to Make A Donut Chart With Text Inside Including the Animation
我有一个项目要提交,但我一直在创建圆环图,其中包含 CSS 上的动画和其切片内的文本。
我想要一个与下面指定的图表相同的类似图表,您可以看到图表的动画只是进入 www.al-ashram.com 。我遇到了很多 js 库,但都与这个有点不同,因为我认为它是一个简单的图表,只能通过 CSS 和 html.
非常感谢您帮助我获得完全相同的结构,以便我可以将其添加到我的项目中以供提交
this is the chart i want
也许这可以帮助
$(document).ready(function () {
$('div#cn-wrapper ').addClass('opened-nav')
});
.parallax-container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 80px 40px;
}
.parallax-container .parallax {
background-color: #66a8d8;
}
.parallax-container {
min-height: 300px;
height: auto;
}
.parallax-container {
position: relative;
overflow: hidden;
height: 600px;
}
.parallax, .parallax img {
position: absolute;
bottom: 0;
}
.component {
position: relative;
margin: 1rem 0;
height: auto;
background: none;
}
.csstransforms .cn-wrapper.opened-nav {
opacity: 1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.csstransforms .cn-wrapper {
position: relative;
z-index: 10;
width: 40em;
height: 40em;
border-radius: 50%;
background: transparent;
opacity: 0;
-webkit-transition: all .3s ease .3s;
transition: all .3s ease .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
pointer-events: none;
overflow: hidden;
margin: 0 auto;
}
.csstransforms .corp-logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.csstransforms .cn-wrapper ul {
position: relative;
margin: 0;
margin-left: -10px;
}
ul:not(.browser-default) {
padding-left: 0;
list-style-type: none;
}
.csstransforms .cn-wrapper.opened-nav li:first-child {
-webkit-transform: rotate(
-90deg) skew(
45deg);
-ms-transform: rotate(-90deg) skew(45deg);
transform: rotate(
-90deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li {
-webkit-transition: all .7s ease .4s;
transition: all .7s ease .4s;
}
.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-top: -1.2em;
margin-left: -10em;
width: 10em;
height: 10em;
font-size: 2.2em;
-webkit-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(
76deg) skew(
60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(
76deg) skew(
60deg);
-webkit-transform-origin: 102% 102%;
-ms-transform-origin: 102% 102%;
transform-origin: 102% 102%;
pointer-events: auto;
}
ul:not(.browser-default) li {
list-style-type: none;
}
.csstransforms .cn-wrapper li .slice {
position: fixed;
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
background: #66a8d8;
background: -webkit-radial-gradient(transparent 30%,rgba(195,223,244,.5) 0);
background: radial-gradient(transparent 30%,rgba(195,223,244,.5) 0);
color: #fff;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(
-45deg) rotate(
-60deg) scale(1);
-ms-transform: skew(-45deg) rotate(-60deg) scale(1);
transform: skew(
-45deg) rotate(
-60deg) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none;
}
.csstransforms .cn-wrapper.opened-nav li:first-child .slice>span {
-webkit-transform: rotate(
150deg);
-ms-transform: rotate(150deg);
transform: rotate(
150deg);
}
.csstransforms .cn-wrapper li .slice>span {
position: relative;
top: 1.8em;
left: -2em;
max-width: 8rem;
min-height: 8rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 5px;
font-size: .35em;
line-height: 1.5em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin: 0 auto;
}
.csstransforms .cn-wrapper li .slice>span h6, .csstransforms .cn-wrapper li .slice>span p {
margin-top: 0;
font-size: 1.1rem;
margin-bottom: 5px;
}
p:last-child {
margin-bottom: 0;
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(2) {
-webkit-transform: rotate(
-45deg) skew(
45deg);
-ms-transform: rotate(-45deg) skew(45deg);
transform: rotate(
-45deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(3) {
-webkit-transform: rotate(
0deg) skew(
45deg);
-ms-transform: rotate(0deg) skew(45deg);
transform: rotate(
0deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(4) {
-webkit-transform: rotate(
45deg) skew(
45deg);
-ms-transform: rotate(45deg) skew(45deg);
transform: rotate(
45deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(5) {
-webkit-transform: rotate(
90deg) skew(
45deg);
-ms-transform: rotate(90deg) skew(45deg);
transform: rotate(
90deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(6) {
-webkit-transform: rotate(
135deg) skew(
45deg);
-ms-transform: rotate(135deg) skew(45deg);
transform: rotate(
135deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(7) {
-webkit-transform: rotate(
180deg) skew(
45deg);
-ms-transform: rotate(180deg) skew(45deg);
transform: rotate(
180deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(8) {
-webkit-transform: rotate(
225deg) skew(
45deg);
-ms-transform: rotate(225deg) skew(45deg);
transform: rotate(
225deg) skew(
45deg);
}
.csstransforms .cn-wrapper:after {
content: ".";
display: block;
font-size: 2em;
width: 6.2em;
height: 6.2em;
position: absolute;
left: 50%;
margin-left: -3.1em;
top: 50%;
margin-top: -3.1em;
border-radius: 50%;
z-index: 10;
color: transparent;
}
.csstransforms .cn-wrapper.opened-nav {
opacity: 1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.csstransforms .cn-wrapper {
position: relative;
z-index: 10;
width: 40em;
height: 40em;
border-radius: 50%;
background: transparent;
opacity: 0;
-webkit-transition: all .3s ease .3s;
transition: all .3s ease .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
pointer-events: none;
overflow: hidden;
margin: 0 auto;
}
body.csstransforms {
margin: 0;
background-color: lightblue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="csstransforms">
<div class="col s12 l7 aboutbg_div">
<div class="parallax-container">
<div class="component">
<div class="cn-wrapper" id="cn-wrapper">
<div class="corp-logo">
<img src="https://al-ashram.com/wp-content/themes/alashram/framework/dist/img/logo-min-white-200.png" width="200" height="200" class="responsive-img" alt="logo">
</div>
<ul>
<li id="slice-1">
<div class="slice">
<span>
<p>ISO 14001 & 9001<br> OHSAS 18001<br> certified</p>
</span>
</div>
</li>
<li id="slice-2">
<div class="slice">
<span>
<p>Executed single<br> project worth<br> AED</p>
<h4>350mn</h4>
</span>
</div>
</li>
<li id="slice-3">
<div class="slice">
<span>
<p>A workforce of</p><h4>1,500</h4>
</span>
</div>
</li>
<li id="slice-4">
<div class="slice">
<span>
<p>A capitalized<br> company of<br> AED</p>
<h4>100mn</h4>
</span>
</div>
</li>
<li id="slice-5">
<div class="slice">
<span>
<h6>Over</h6><h4>45</h4>
<h6>years of experience</h6>
</span>
</div>
</li>
<li id="slice-6">
<div class="slice">
<span>
<p>Gross executed<br> projects worth<br> AED</p>
<h4>3.1bn</h4>
</span>
</div>
</li>
<li id="slice-7">
<div class="slice">
<span>
<p>Vertical construction<br> up to</p>
<h4>250m</h4>
</span>
</div>
</li>
<li id="slice-8">
<div class="slice">
<span>
<p>Over</p>
<h4>67</h4>
<p>projects executed</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
我有一个项目要提交,但我一直在创建圆环图,其中包含 CSS 上的动画和其切片内的文本。
我想要一个与下面指定的图表相同的类似图表,您可以看到图表的动画只是进入 www.al-ashram.com 。我遇到了很多 js 库,但都与这个有点不同,因为我认为它是一个简单的图表,只能通过 CSS 和 html.
非常感谢您帮助我获得完全相同的结构,以便我可以将其添加到我的项目中以供提交
this is the chart i want
也许这可以帮助
$(document).ready(function () {
$('div#cn-wrapper ').addClass('opened-nav')
});
.parallax-container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 80px 40px;
}
.parallax-container .parallax {
background-color: #66a8d8;
}
.parallax-container {
min-height: 300px;
height: auto;
}
.parallax-container {
position: relative;
overflow: hidden;
height: 600px;
}
.parallax, .parallax img {
position: absolute;
bottom: 0;
}
.component {
position: relative;
margin: 1rem 0;
height: auto;
background: none;
}
.csstransforms .cn-wrapper.opened-nav {
opacity: 1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.csstransforms .cn-wrapper {
position: relative;
z-index: 10;
width: 40em;
height: 40em;
border-radius: 50%;
background: transparent;
opacity: 0;
-webkit-transition: all .3s ease .3s;
transition: all .3s ease .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
pointer-events: none;
overflow: hidden;
margin: 0 auto;
}
.csstransforms .corp-logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.csstransforms .cn-wrapper ul {
position: relative;
margin: 0;
margin-left: -10px;
}
ul:not(.browser-default) {
padding-left: 0;
list-style-type: none;
}
.csstransforms .cn-wrapper.opened-nav li:first-child {
-webkit-transform: rotate(
-90deg) skew(
45deg);
-ms-transform: rotate(-90deg) skew(45deg);
transform: rotate(
-90deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li {
-webkit-transition: all .7s ease .4s;
transition: all .7s ease .4s;
}
.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-top: -1.2em;
margin-left: -10em;
width: 10em;
height: 10em;
font-size: 2.2em;
-webkit-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(
76deg) skew(
60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(
76deg) skew(
60deg);
-webkit-transform-origin: 102% 102%;
-ms-transform-origin: 102% 102%;
transform-origin: 102% 102%;
pointer-events: auto;
}
ul:not(.browser-default) li {
list-style-type: none;
}
.csstransforms .cn-wrapper li .slice {
position: fixed;
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
background: #66a8d8;
background: -webkit-radial-gradient(transparent 30%,rgba(195,223,244,.5) 0);
background: radial-gradient(transparent 30%,rgba(195,223,244,.5) 0);
color: #fff;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(
-45deg) rotate(
-60deg) scale(1);
-ms-transform: skew(-45deg) rotate(-60deg) scale(1);
transform: skew(
-45deg) rotate(
-60deg) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none;
}
.csstransforms .cn-wrapper.opened-nav li:first-child .slice>span {
-webkit-transform: rotate(
150deg);
-ms-transform: rotate(150deg);
transform: rotate(
150deg);
}
.csstransforms .cn-wrapper li .slice>span {
position: relative;
top: 1.8em;
left: -2em;
max-width: 8rem;
min-height: 8rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 5px;
font-size: .35em;
line-height: 1.5em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin: 0 auto;
}
.csstransforms .cn-wrapper li .slice>span h6, .csstransforms .cn-wrapper li .slice>span p {
margin-top: 0;
font-size: 1.1rem;
margin-bottom: 5px;
}
p:last-child {
margin-bottom: 0;
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(2) {
-webkit-transform: rotate(
-45deg) skew(
45deg);
-ms-transform: rotate(-45deg) skew(45deg);
transform: rotate(
-45deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(3) {
-webkit-transform: rotate(
0deg) skew(
45deg);
-ms-transform: rotate(0deg) skew(45deg);
transform: rotate(
0deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(4) {
-webkit-transform: rotate(
45deg) skew(
45deg);
-ms-transform: rotate(45deg) skew(45deg);
transform: rotate(
45deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(5) {
-webkit-transform: rotate(
90deg) skew(
45deg);
-ms-transform: rotate(90deg) skew(45deg);
transform: rotate(
90deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(6) {
-webkit-transform: rotate(
135deg) skew(
45deg);
-ms-transform: rotate(135deg) skew(45deg);
transform: rotate(
135deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(7) {
-webkit-transform: rotate(
180deg) skew(
45deg);
-ms-transform: rotate(180deg) skew(45deg);
transform: rotate(
180deg) skew(
45deg);
}
.csstransforms .cn-wrapper.opened-nav li:nth-child(8) {
-webkit-transform: rotate(
225deg) skew(
45deg);
-ms-transform: rotate(225deg) skew(45deg);
transform: rotate(
225deg) skew(
45deg);
}
.csstransforms .cn-wrapper:after {
content: ".";
display: block;
font-size: 2em;
width: 6.2em;
height: 6.2em;
position: absolute;
left: 50%;
margin-left: -3.1em;
top: 50%;
margin-top: -3.1em;
border-radius: 50%;
z-index: 10;
color: transparent;
}
.csstransforms .cn-wrapper.opened-nav {
opacity: 1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.csstransforms .cn-wrapper {
position: relative;
z-index: 10;
width: 40em;
height: 40em;
border-radius: 50%;
background: transparent;
opacity: 0;
-webkit-transition: all .3s ease .3s;
transition: all .3s ease .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
pointer-events: none;
overflow: hidden;
margin: 0 auto;
}
body.csstransforms {
margin: 0;
background-color: lightblue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="csstransforms">
<div class="col s12 l7 aboutbg_div">
<div class="parallax-container">
<div class="component">
<div class="cn-wrapper" id="cn-wrapper">
<div class="corp-logo">
<img src="https://al-ashram.com/wp-content/themes/alashram/framework/dist/img/logo-min-white-200.png" width="200" height="200" class="responsive-img" alt="logo">
</div>
<ul>
<li id="slice-1">
<div class="slice">
<span>
<p>ISO 14001 & 9001<br> OHSAS 18001<br> certified</p>
</span>
</div>
</li>
<li id="slice-2">
<div class="slice">
<span>
<p>Executed single<br> project worth<br> AED</p>
<h4>350mn</h4>
</span>
</div>
</li>
<li id="slice-3">
<div class="slice">
<span>
<p>A workforce of</p><h4>1,500</h4>
</span>
</div>
</li>
<li id="slice-4">
<div class="slice">
<span>
<p>A capitalized<br> company of<br> AED</p>
<h4>100mn</h4>
</span>
</div>
</li>
<li id="slice-5">
<div class="slice">
<span>
<h6>Over</h6><h4>45</h4>
<h6>years of experience</h6>
</span>
</div>
</li>
<li id="slice-6">
<div class="slice">
<span>
<p>Gross executed<br> projects worth<br> AED</p>
<h4>3.1bn</h4>
</span>
</div>
</li>
<li id="slice-7">
<div class="slice">
<span>
<p>Vertical construction<br> up to</p>
<h4>250m</h4>
</span>
</div>
</li>
<li id="slice-8">
<div class="slice">
<span>
<p>Over</p>
<h4>67</h4>
<p>projects executed</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>