自适应柱状图图表点击查看详情效果代码
代码语言: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__it.........完整代码请登录后点击上方下载按钮下载查看
网友评论0