渐变色的3D柱子，超出100%后变红

最新推荐文章于 2020-09-28 20:58:51 发布

java_zhaoyanli

最新推荐文章于 2020-09-28 20:58:51 发布

阅读量579

点赞数

分类专栏： myWork--

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/68927141

版权

myWork-- 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

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;
}