渐变色的3D柱子，超出100%后变红
来源：互联网 发布：cr173破解软件 编辑：程序博客网 时间：2024/05/06 18:50
html
<div class="content"> <iframe src="colnum.html" class="ifcon"></iframe> <iframe src="colnum2.html" class="ifcon"></iframe> </div>colnum.html
<!DOCTYPE><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/graph.css" /> <script src="js/jquery-1.11.3.js"></script><style> input[name^='resize-']:checked + label{ background:transparent !important; } /*柱子顶部*/ .bar-inner::after{ background-color:#E9FF5C; } /*前面*/ input:checked#f-product1 ~ .graph-container > li .bar-inner{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#94F710',endColorStr='#FCE702',gradientType='0'); background: -moz-linear-gradient(top, #94F710, #FCE702); background: -o-linear-gradient(top,#94F710, #FCE702); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#94F710), to(#FCE702)) ; /*background: -ms-linear-gradient(top,#94F710 0%,#FCE702 100%);*//*ie11*/ } /*侧面*/ .bar-inner::before{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#47B602',endColorStr='#C6B118',gradientType='0'); background: -moz-linear-gradient(top, #47B602, #C6B118); background: -o-linear-gradient(top,#47B602, #C6B118); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#47B602), to(#C6B118)) ; background: -ms-linear-gradient(top,#47B602 0%,#C6B118 100%);/*ie11*/ } .graph-container { margin-left:10%; background-color:#fff; width:35%; height:100%; margin-top:0; } .graph-container li{ height:100%; } .graph-marker-container li{ border-top:1px dashed #838383; z-index:1; } .bar-wrapper{ height:100%; } .bar-container{height:100% !important;} .graph-marker-container{ height:100%; } .graph-marker-container{height:100% !important;} input#graph-large:checked ~ .graph-container .bar-container, input#graph-large:checked ~ .graph-container::after, input#graph-large:checked ~ .graph-container > li:last-child{ height:100% !important; } .tname{ font-size:2em !important; } .graph-marker-container::after{ } .qian{ background: -ms-linear-gradient(top,#FF154A 1%,#94F710 20%,#C6B118 ); } .qian2{ background: -ms-linear-gradient(top,#47B602 10%,#C6B118 100%); } .ce{ background: -ms-linear-gradient(top,#A11767 1%,#47B602 20%,#C6B118 ); } .ce2{ background: -ms-linear-gradient(top,#47B602 10%,#C6B118 100%) ; } </style> </head> <body> <div class="container" style="width:100%;height:100%;"> <section class="main"> <input type="radio" name="resize-graph" id="graph-large" checked="checked" /> <!--<input type="radio" name="resize-graph" id="graph-large" checked="checked"/> <label for="graph-normal"></label>--> <input type="radio" name="fill-graph" id="f-product1" checked="checked" /> <ul class="graph-container"> <li> <span class="tname">输出（Kw）</span> <div class="bar-wrapper"> <div class="bar-container"> <div class="bar-background"></div> <div class="bar-inner">55</div> <div class="bar-foreground"></div> </div> </div> </li> <li> <ul class="graph-marker-container" > <li style="bottom:8.3%;"><span>1kw</span></li> <li style="bottom:16.6%;"><span>2kw</span></li> <li style="bottom:25%;"><span>3kw</span></li> <li style="bottom:33.2%;"><span>4kw</span></li> <li style="bottom:41.5%;"><span>5kw</span></li> <li style="bottom:49.8%;"><span>6kw</span></li> <li style="bottom:58.1%;"><span>7kw</span></li> <li style="bottom:66.4%;"><span>8kw</span></li> <li style="bottom:74.7%;"><span>9kw</span></li> <li style="bottom:83%;"><span>10kw</span></li> <li style="bottom:91.3%;"><span>11kw</span></li> <li style="bottom:100%;"><span>12kw</span></li> </ul> </li> </ul> </section> </div> <script> //alert($(".master_02 .content",parent.document).height()); //alert($('.graph-container').height()); // alert($('.bar-inner').height()); var top = $('.graph-container').height() * (5 / 6); var toph = $('.graph-container').height() * (5 / 3) //alert(top); //alert($('input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner ').height()); if ($('input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner').height() >= (top)) { $('input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner ').addClass('qian'); $(' .bar-foreground::before').addClass('ce'); $('.bar-inner::after').css(" background: #FD48FE;" ); } else { $('input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner ').addClass('qian2'); $(' .bar-inner::before ').addClass('ce2'); $(' .bar-foreground::after').css(" background: #FD48FE;"); } </script> </body></html>demo.css@import url('normalize.css');/* General Demo Style */body{font-family: 'Open Sans Condensed','Arial Narrow', serif;font-weight: 400;font-size: 15px;color: #333;overflow-y: hidden;}a{color: #555;text-decoration: none;}.container{width: 100%;position: relative; background-color:#fff;}.main{text-align: center;width: 100%; height:100%;padding: 30px 50px 50px 50px;margin: 0 auto 30px auto;}.clr{clear: both;padding: 0;height: 0;margin: 0;}.container > header{margin: 10px;padding: 20px 10px 10px 10px;position: relative;display: block;text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center;}.container > header h1{font-size: 36px;line-height: 40px;margin: 0;position: relative;font-weight: 300;color: #888;padding: 5px 0px;text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}.container > header h1 span{font-weight: 700;}.container > header p{font-style: italic;color: #aaa;text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}/* Header Style */.codrops-top{line-height: 24px;font-size: 11px;background: #fff;background: rgba(255, 255, 255, 0.6);text-transform: uppercase;z-index: 9999;position: relative;font-family: Cambria, Georgia, serif;box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}.codrops-top a{padding: 0px 10px;letter-spacing: 1px;color: #333;display: inline-block;}.codrops-top a:hover{background: rgba(255,255,255,0.9);}.codrops-top span.right{float: right;}.codrops-top span.right a{float: left;display: block;}.ie-note{color: #ac375d;display: none;font-size: 15px;}
modernizr.custom.04022.js
也是搜了一个3d的案例，自己修改的样式colnum2.html同上
graph.css 该文件370行起是控制数值的
兼容ie11
结合：
http://www.htmleaf.com/css3/css3donghua/20141101352.html
0 0
- 渐变色的3D柱子，超出100%后变红
- (3)Jfreechart柱状图自定义柱子颜色以及柱子的方向
- highcharts图表组件实战经验篇：如何设置柱状图柱子立体（颜色渐变）效果类似3D效果之linearGradient和stops
- 解决加入图片后R变红 的问题
- CSS3(圆角 渐变 2D 3D ....)
- Unity 3D 物体之渐变色切换
- 关于iOS项目拖到别的文件夹后文件变红的问题
- 页面中字符串超出后的解决方案
- 页面中字符串超出后的解决方案
- idea 断电后 崩溃 全变红
- 百度图表柱子背景颜色使用渐变效果
- 关于R变红的解决
- gridEH 3d 标题栏颜色渐变
- 如何实现TWaver 3D颜色渐变
- 如何实现TWaver 3D颜色渐变
- ssoj2867淘淘的柱子朋友
- 渐变色的设置
- 窗口最大化后超出液晶显示器的屏幕范围的问题
- 使用bower安装bootstrap遇到的问题
- bzoj 3064: Tyvj 1518 CPU监控 （线段树）
- table相同的列合并
- Python+Selenium练习篇之8-利用css定位元素
- java 中的集合（三） ArrayList源码分析
- 渐变色的3D柱子，超出100%后变红
- test
- K
- android.view.WindowManager$BadTokenException: Unable to add window -- token null is not valid; is yo
- Q&A——资源管理（七）
- java 中的集合（四） Vector源码分析
- hibernate学习之继承映射
- java synchronized
- JS创建Img元素
