CSS3实验饼图、半圆、三角

饼状图表

pie,circle

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2012
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.data {
  position: relative;
  margin: 5em auto;
  width: 280px;
  height: 280px; }

.data__circle__fourth {
  cursor: pointer;
  float: left;
  position: relative;
  width: 140px;
  height: 140px;
  overflow: hidden; }

.data__circle__fourth::before {
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 93.33333px;
  height: 93.33333px;
  -webkit-transition: -webkit-transform 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.data__circle__fourth::after {
  background: #27292a;
  color: #555;
  padding: 8px;
  position: absolute;
  -webkit-transition: color 350ms ease-in-out;
  transition: color 350ms ease-in-out; }

.data__circle__fourth:nth-child(1) {
  background: -webkit-linear-gradient(45deg, transparent 49.5%, #666 50%, transparent 50%);
  background: linear-gradient(45deg, transparent 49.5%, #666 50%, transparent 50%); }

.data__circle__fourth:nth-child(1)::before {
  background: #f60669;
  right: -46.66667px;
  bottom: -46.66667px;
  -webkit-transform: rotate(45deg) scale(1.5) translateZ(0px);
  transform: rotate(45deg) scale(1.5) translateZ(0px); }

.data__circle__fourth:nth-child(1):hover::before {
  -webkit-transform: rotate(45deg) scale(2.5) translateZ(0px);
  transform: rotate(45deg) scale(2.5) translateZ(0px); }

.data__circle__fourth:nth-child(1)::after {
  content: attr(data-number);
  top: 0;
  left: 0; }

.data__circle__fourth:nth-child(1):hover::after {
  color: #fff; }

.data__circle__fourth:nth-child(2) {
  background: -webkit-linear-gradient(315deg, transparent 49.5%, #666 50%, transparent 50%);
  background: linear-gradient(135deg, transparent 49.5%, #666 50%, transparent 50%); }

.data__circle__fourth:nth-child(2)::before {
  background: #fdfb00;
  left: -46.66667px;
  bottom: -46.66667px;
  -webkit-transform: rotate(45deg) scale(0.9) translateZ(0px);
  transform: rotate(45deg) scale(0.9) translateZ(0px); }

.data__circle__fourth:nth-child(2):hover::before {
  -webkit-transform: rotate(45deg) scale(2.5) translateZ(0px);
  transform: rotate(45deg) scale(2.5) translateZ(0px); }

.data__circle__fourth:nth-child(2)::after {
  content: attr(data-number);
  top: 0;
  right: 0; }

.data__circle__fourth:nth-child(2):hover::after {
  color: #fff; }

.data__circle__fourth:nth-child(3) {
  background: -webkit-linear-gradient(315deg, transparent 49.5%, #666 50%, transparent 50%);
  background: linear-gradient(135deg, transparent 49.5%, #666 50%, transparent 50%); }

.data__circle__fourth:nth-child(3)::before {
  background: #00b4f4;
  top: -46.66667px;
  right: -46.66667px;
  -webkit-transform: rotate(45deg) scale(2) translateZ(0px);
  transform: rotate(45deg) scale(2) translateZ(0px); }

.data__circle__fourth:nth-child(3):hover::before {
  -webkit-transform: rotate(45deg) scale(2.8) translateZ(0px);
  transform: rotate(45deg) scale(2.8) translateZ(0px); }

.data__circle__fourth:nth-child(3)::after {
  content: attr(data-number);
  bottom: 0;
  left: 0; }

.data__circle__fourth:nth-child(3):hover::after {
  color: #fff; }

.data__circle__fourth:nth-child(4) {
  background: -webkit-linear-gradient(45deg, transparent 49.5%, #666 50%, transparent 50%);
  background: linear-gradient(45deg, transparent 49.5%, #666 50%, transparent 50%); }

.data__circle__fourth:nth-child(4)::before {
  background: #bcd76b;
  top: -46.66667px;
  left: -46.66667px;
  -webkit-transform: rotate(45deg) scale(1.1) translateZ(0px);
  transform: rotate(45deg) scale(1.1) translateZ(0px); }

.data__circle__fourth:nth-child(4):hover::before {
  -webkit-transform: rotate(45deg) scale(2.5) translateZ(0px);
  transform: rotate(45deg) scale(2.5) translateZ(0px); }

.data__circle__fourth:nth-child(4)::after {
  content: attr(data-number);
  bottom: 0;
  right: 0; }

.data__circle__fourth:nth-child(4):hover::after {
  color: #fff; }

.horizontal {
  position: relative;
  margin: 5em auto;
  width: 600px;
  height: 120px; }

.horizontal__wave {
  cursor: pointer;
  position: relative;
  float: left;
  width: 33.33333%;
  /*    &::after {
        background: $color-base;
        color: #555;
        padding: 8px;
        position: absolute;
      }*/
  height: 50%;
  overflow: hidden; }

.horizontal__wave::before {
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 50%;
  height: 200%;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out; }

.horizontal__wave:nth-child(1)::before, .horizontal__wave:nth-child(2)::before, .horizontal__wave:nth-child(3)::before {
  top: 0;
  left: 0; }

.horizontal__wave:nth-child(1) {
  background: -webkit-linear-gradient(0deg, transparent 24%, #666 25%, transparent 26%);
  background: linear-gradient(90deg, transparent 24%, #666 25%, transparent 26%); }

.horizontal__wave:nth-child(1)::before {
  background: #fa8072;
  -webkit-transform: translateY(7%) scale(1.01) translateZ(0px);
  transform: translateY(7%) scale(1.01) translateZ(0px); }

.horizontal__wave:nth-child(1):hover::before {
  -webkit-transform: translateY(0) scale(1) translateZ(0px);
  transform: translateY(0) scale(1) translateZ(0px); }

.horizontal__wave:nth-child(2) {
  background: -webkit-linear-gradient(0deg, transparent 24%, #666 25%, transparent 26%);
  background: linear-gradient(90deg, transparent 24%, #666 25%, transparent 26%); }

.horizontal__wave:nth-child(2)::before {
  background: #fba440;
  -webkit-transform: translateY(16.6667%) scale(1.05) translateZ(0px);
  transform: translateY(16.6667%) scale(1.05) translateZ(0px); }

.horizontal__wave:nth-child(2):hover::before {
  -webkit-transform: translateY(0) scale(1) translateZ(0px);
  transform: translateY(0) scale(1) translateZ(0px); }

.horizontal__wave:nth-child(3) {
  background: -webkit-linear-gradient(0deg, transparent 24%, #666 25%, transparent 26%);
  background: linear-gradient(90deg, transparent 24%, #666 25%, transparent 26%); }

.horizontal__wave:nth-child(3)::before {
  background: #579fbb;
  -webkit-transform: translateY(33.3333%) scale(1.2) translateZ(0px);
  transform: translateY(33.3333%) scale(1.2) translateZ(0px); }

.horizontal__wave:nth-child(3):hover::before {
  -webkit-transform: translateY(0) scale(1) translateZ(0px);
  transform: translateY(0) scale(1) translateZ(0px); }

.horizontal__wave:nth-child(4)::before, .horizontal__wave:nth-child(5)::before, .horizontal__wave:nth-child(6)::before {
  top: -100%;
  right: 0; }

.horizontal__wave:nth-child(4) {
  background: -webkit-linear-gradient(0deg, transparent 74%, #666 75%, transparent 76%);
  background: linear-gradient(90deg, transparent 74%, #666 75%, transparent 76%); }

.horizontal__wave:nth-child(4)::before {
  background: #906b92;
  -webkit-transform: translateY(-7%) scale(1.01) translateZ(0px);
  transform: translateY(-7%) scale(1.01) translateZ(0px); }

.horizontal__wave:nth-child(4):hover::before {
  -webkit-transform: translateY(0) scale(1) translateZ(0px);
  transform: translateY(0) scale(1) translateZ(0px); }

.horizontal__wave:nth-child(5) {
  background: -webkit-linear-gradient(0deg, transparent 74%, #666 75%, transparent 76%);
  background: linear-gradient(90deg, transparent 74%, #666 75%, transparent 76%); }

.horizontal__wave:nth-child(5)::before {
  background: #4fb3a7;
  -webkit-transform: translateY(-16.6667%) scale(1.05) translateZ(0px);
  transform: translateY(-16.6667%) scale(1.05) translateZ(0px); }

.horizontal__wave:nth-child(5):hover::before {
  -webkit-transform: translateY(0) scale(1) translateZ(0px);
  transform: translateY(0) scale(1) translateZ(0px); }

.horizontal__wave:nth-child(6) {
  background: -webkit-linear-gradient(0deg, transparent 74%, #666 75%, transparent 76%);
  background: linear-gradient(90deg, transparent 74%, #666 75%, transparent 76%); }

.horizontal__wave:nth-child(6)::before {
  background: #f1f4d9;
  -webkit-transform: translateY(-33.3333%) scale(1.2) translateZ(0px);
  transform: translateY(-33.3333%) scale(1.2) translateZ(0px); }

.horizontal__wave:nth-child(6):hover::before {
  -webkit-transform: translateY(0) scale(1) translateZ(0px);
  transform: translateY(0) scale(1) translateZ(0px); }

.bar {
  position: relative;
  margin: 5em auto;
  padding-left: 75px;
  width: 750px;
  height: 200px;
  overflow: hidden; }

.bar__pyramid {
  cursor: pointer;
  position: relative;
  float: left;
  width: 150px;
  height: 200px; }

.bar__pyramid::before {
  content: "";
  position: absolute;
  -webkit-transform: translateY(83%) scale(1) rotate(-30deg) skew(30deg) scaleY(0.86603);
  -ms-transform: translateY(83%) scale(1) rotate(-30deg) skew(30deg) scaleY(0.86603);
  transform: translateY(83%) scale(1) rotate(-30deg) skew(30deg) scaleY(0.86603);
  width: 150px;
  height: 150px;
  -webkit-transition: -webkit-transform 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.bar__pyramid:nth-child(1) {
  background: -webkit-linear-gradient(0deg, transparent 49%, #666 50%, transparent 51%);
  background: linear-gradient(90deg, transparent 49%, #666 50%, transparent 51%); }

.bar__pyramid:nth-child(1)::before {
  background-color: #f60669; }

.bar__pyramid:nth-child(1):hover::before {
  -webkit-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  -ms-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1); }

.bar__pyramid:nth-child(2) {
  background: -webkit-linear-gradient(0deg, transparent 49%, #666 50%, transparent 51%);
  background: linear-gradient(90deg, transparent 49%, #666 50%, transparent 51%); }

.bar__pyramid:nth-child(2)::before {
  background-color: #fdfb00; }

.bar__pyramid:nth-child(2):hover::before {
  -webkit-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  -ms-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1); }

.bar__pyramid:nth-child(2):hover .serie .serie__left {
  -webkit-transform: translateY(-96px);
  -ms-transform: translateY(-96px);
  transform: translateY(-96px); }

.bar__pyramid:nth-child(2):hover .serie .serie__right {
  -webkit-transition: -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out;
  -webkit-transform: translateY(-64px);
  -ms-transform: translateY(-64px);
  transform: translateY(-64px); }

.bar__pyramid:nth-child(2):hover .serie ul li {
  -webkit-transition: color 3s ease-in-out;
  transition: color 3s ease-in-out;
  color: #fff; }

.bar__pyramid:nth-child(3) {
  background: -webkit-linear-gradient(0deg, transparent 49%, #666 50%, transparent 51%);
  background: linear-gradient(90deg, transparent 49%, #666 50%, transparent 51%); }

.bar__pyramid:nth-child(3)::before {
  background-color: #00b4f4; }

.bar__pyramid:nth-child(3):hover::before {
  -webkit-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  -ms-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1); }

.bar__pyramid:nth-child(3):hover .serie .serie__left {
  -webkit-transform: translateY(-128px);
  -ms-transform: translateY(-128px);
  transform: translateY(-128px); }

.bar__pyramid:nth-child(3):hover .serie .serie__right {
  -webkit-transition: -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out;
  -webkit-transform: translateY(-80px);
  -ms-transform: translateY(-80px);
  transform: translateY(-80px); }

.bar__pyramid:nth-child(3):hover .serie ul li {
  -webkit-transition: color 3s ease-in-out;
  transition: color 3s ease-in-out;
  color: #fff; }

.bar__pyramid:nth-child(4) {
  background: -webkit-linear-gradient(0deg, transparent 49%, #666 50%, transparent 51%);
  background: linear-gradient(90deg, transparent 49%, #666 50%, transparent 51%); }

.bar__pyramid:nth-child(4)::before {
  background-color: #bcd76b; }

.bar__pyramid:nth-child(4):hover::before {
  -webkit-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  -ms-transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1);
  transform: translateY(83%) scale(1.22474) rotate(-45deg) skew(0deg) scaleY(1); }

.bar__pyramid:nth-child(4):hover .serie .serie__left {
  -webkit-transform: translateY(-160px);
  -ms-transform: translateY(-160px);
  transform: translateY(-160px); }

.bar__pyramid:nth-child(4):hover .serie .serie__right {
  -webkit-transition: -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out; }

.bar__pyramid:nth-child(4):hover .serie ul li {
  -webkit-transition: color 3s ease-in-out;
  transition: color 3s ease-in-out;
  color: #fff; }

.serie {
  position: relative;
  margin: 0 auto;
  width: 50px;
  height: 15px;
  overflow: hidden; }

.serie:hover .serie__left {
  -webkit-transform: transform3d(0, -80px, 0);
  -ms-transform: transform3d(0, -80px, 0);
  transform: transform3d(0, -80px, 0); }

.serie:hover .serie__right {
  -webkit-transition: -webkit-transform 2.5s ease-in-out;
  transition: transform 2.5s ease-in-out;
  -webkit-transform: transform3d(0, -32px, 0);
  -ms-transform: transform3d(0, -32px, 0);
  transform: transform3d(0, -32px, 0); }

.serie__left {
  text-align: right; }

.serie__right {
  text-align: left; }

.serie__left, .serie__right {
  position: relative;
  float: left;
  width: 50%;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out; }

.serie__left li, .serie__right li {
  background: #27292a;
  display: block;
  color: #555;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: color 1s ease-in-out;
  transition: color 1s ease-in-out; }

*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility; }

html, body {
  height: 100%; }

body {
  background: #27292a;
  font-family: 'Montserrat', sans-serif; }

HTML

饼状图表

pie,circle

编辑器支持Emmet

快捷键

饼状图表

pie,circle

使用CSS3实现的一组不规则同心圆

D3.js 带虚线延伸提示的弹性环状饼图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：