自适应柱状图图表点击查看详情效果代码
代码语言:html
所属分类:图表
代码描述:自适应柱状图图表点击查看详情效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> * { box-sizing: border-box; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; min-height: 100vh; line-height: 1.5; font-family: 'Lato'; -webkit-font-smoothing: antialiased; color: white; background: tomato; } ul { list-style-type: none; padding: 0; margin: 0; } .stats { position: relative; padding: 0 25px; } @media (max-width: 690px) { .stats { width: 100%; } } .stats__header { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0); opacity: 0; -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .stats__header.active { -webkit-transform: none; transform: none; opacity: 1; } .stats__header-num { margin-right: 25px; } .stats__header-num p { font-size: 80px; margin: 0; font-weight: 700; } .stats__header-name p { color: #f8d0d8; margin: 0; font-size: 18px; } .stats__header-name span { display: block; color: white; font-weight: 700; font-size: 36px; line-height: 0.8; } .stats__item { height: 400px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; float: left; position: relative; text-align: center; margin-right: 37.5px; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .stats__item:nth-of-type(1) .stats__item-bar { height: 260px; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .stats__item:nth-of-type(2) .stats__item-bar { height: 224px; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .stats__item:nth-of-type(3) .stats__item-bar { height: 200px; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .stats__item:nth-of-type(4) .stats__item-bar { height: 128px; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .stats__item:nth-of-type(5) .stats__item-bar { height: 152px; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .stats__item:nth-of-type(6) .stats__item-bar { height: 128.4px; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .stats__item:nth-of-type(7) .stats__item-bar { height: 204px; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .stats__item:nth-of-type(8) .stats__item-bar { height: 200.4px; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .stats__item:last-child { margin-right: 0; } @media (max-width: 690px) { .stats__item { float: none; height: auto; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; } .stats__item:nth-of-type(1) .stats__item-bar { width: 65%; height: 30px; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .stats__item:nth-of-type(2) .stats__item-bar { width: 56%; height: 30px; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .stats__item:nth-of-type(3) .stats__item-bar { width: 50%; height: 30px; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .stats__item:nth-of-type(4) .stats__item-bar { width: 32%; height: 30px; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .stats__item:nth-of-type(5) .stats__item-bar { width: 38%; height: 30px; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .stats__item:nth-of-type(6) .stats__item-bar { width: 32.1%; height: 30px; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .stats__item:nth-of-type(7) .stats__item-bar { width: 51%; height: 30px; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .stats__item:nth-of-type(8) .stats__item-bar { width: 50.1%; height: 30px; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .stats__item .stats__item-num { margin-right: 25px; } } .stats__item:hover { opacity: 0.7; } .stats__item-bar { -webkit-box-ordinal-group: 1; order: 0; width: 40px; background: white; -webkit-transform: scaleY(0) translate3d(0, 0, 0); transform: scaleY(0) translate3d(0, 0, 0); cursor: pointer; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 10px 15px rgba(0, 0, 0, 0.2); } .stats__item-bar.active { -webkit-transform: none; transform: none; } .stats__item-num { margin-top: 25px; opacity: 0; -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .stats__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 25px; -webkit-transform: scale(1.5); transform: scale(1.5); visibility: hidden; opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .stats__overlay.active { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } @media (max-width: 690px) { .stats__overlay { padding: 12.5px; } } .stats__overlay-avg { position: absolute; top: 50%; left: 50%; width: 350px; height: 350px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; background: #4c2e34; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column wrap; -webkit-box-pack: center; justify-content: center; } .stats__overlay-avg > p { margin: 0; } .stats__overlay-avg .avg { font-size: 100px; font-weight: 700; } @media (max-width: 690px) { .stats__overlay-avg { width: 240px; height: 240px; } .stats__overlay-avg .avg { font-size: 65px; } } .stats__overlay-info { position: absolute; bottom: 25px; lef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0