纯css实现三维进度条效果
代码语言:html
所属分类:加载滚动
代码描述:纯css实现三维进度条效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; line-height: 1em; text-align: center; color: #444; background: #d0d0d0; } h1 { font-size: 2.5em; margin: 2em 0 .5em; } h2 { margin-bottom: 3em; } em, strong { font-weight: 700; } input { display: none; } header p { margin-bottom: 0; } section { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; margin-bottom: 2em; padding: 0; } section:last-of-type { margin-bottom: 0; } section article { align-self: center; width: 20em; margin-bottom: 2em; } section article p, section article:last-of-type { margin-bottom: 0; } p { line-height: 1.5em; max-width: 20em; margin: 1.5em auto 2em; padding-bottom: 1.5em; } p span { display: block; } .container { z-index: 1; display: -webkit-box; display: flex; overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; margin-bottom: 4em; } /* * * START // CHART'S RULES -> "if you're picking code, don't forget the variables :)" */ .chart { font-size: 1em; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-backface-visibility: visible; backface-visibility: visible; } .bar { font-size: 1em; position: relative; height: 10em; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotateX(60deg) rotateY(0deg); transform: rotateX(60deg) rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .bar .face { font-size: 2em; position: relative; width: 100%; height: 2em; background-color: rgba(254, 254, 254, 0.3); } .bar .face.side-a, .bar .face.side-b { width: 2em; } .bar .side-a { -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); } .bar .side.........完整代码请登录后点击上方下载按钮下载查看
网友评论0