css实现三维3d柱状图汇总统计图表效果代码
代码语言:html
所属分类:图表
代码描述:css实现三维3d柱状图汇总统计图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: white; -webkit-perspective: 1500; perspective: 1500; font-family: 'Asar', serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .card { background-color: black; width: 250px; height: 300px; border-radius: 10px; -webkit-perspective: 1500; perspective: 1500; -webkit-transition: box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.2); } @media (min-height: 600px) { .card { width: 400px; height: 550px; } } .card h2, .card h3, .card P { -webkit-transform: translateZ(2px); transform: translateZ(2px); color: white; font-size: 30px; line-height: 30px; margin: 0; font-weight: 300; padding: 0; -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } @media (min-height: 600px) { .card h2, .card h3, .card P { font-size: 40px; line-height: 40px; } } .card h2 { margin: 20px 0 0 0; } .card h3 { margin: 10px 0 40px 0; } @media (min-height: 600px) { .card h3 { margin: 20px 0 40px 0; } } .card P { margin: 0px 0 30px 0; font-size: 16px; } @media (min-height: 600px) { .card P { margin: 0px 0 40px 0; font-size: 21px; } } .card .chart { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(2px); transform: translateZ(2px); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } .card .photo { position: absolute; -webkit-transform: translateZ(1px); transform: translateZ(1px); top: 0; left: 0; right: 0; bottom: 0; background: url("//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png") no-repeat center center; background-size: cover; border-radius: 10px; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; overflow: hidden; } .card .photo:after { position: absolute; content: ' '; display: block; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); -webkit-transition: background-color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out; } .card .bar { will-change: height; width: 15px; height: 1px; background-color: white; -webkit-transform: translateX(-7.5px) rotateX(-90deg) rotateY(-45deg); transform: translateX(-7.5px) rotateX(-90deg) rotateY(-45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transition: height 0.5s ease-in-out, margin 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: height 0.5s ease-in-out, margin 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: height 0.5s ease-in-out, margin 0.5s ease-in-out, transform 0.5s ease-in-out; transition: height 0.5s ease-in-out, margin 0.5s ease-in-out, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 6px; position: relative; background: -webkit-linear-gradient(top, #feffff 0%, #ddf1f9 0%, #a0d8ef 100%); background: linear-gradient(tobottom, #feffff 0%, #ddf1f9 0%, #a0d8ef 100%); } @media (min-height: 600px) { .card .bar { margin: 10px; width: 25px; -webkit-transform: translateX(-12.5px) rotateX(-90deg) rotateY(-45deg); transform: translateX(-12.5px) rotateX(-90deg) rotateY(-45deg); } } .card .bar:after { display: block; content: ''; height: 100%; width: 15px; position: absolute; top: 0; right: -15px; background-color: grey; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; background: -webkit-linear-gradient(top, #feffff 0%, #85d7f7 0%, #4c8596 100%); background: linear-gradient(tobottom, #feffff 0%, #85d7f7 0%, #4c8596 100%); } @media (min-height: 600px) { .card .bar:after { width: 25px; right: -25px; } } .card .bar:before { font-family: 'Oxygen', sans-serif; display: block; content: ''; height: 15px; width: 15px; position: absolute; top: -15px; left: 0; background-color: white; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; color: white; text-align: center; font-size: 10px; line-height: 14px; padding: 0; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } @media (min-height: 600px) { .card ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0