站长资源网页制作
css3闪亮进度条效果实现思路及代码
简介效果图如下： html源码： 复制代码代码如下: New P</div>
<div class="news_infos"><div id="MyContent">效果图如下： <br><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2013417160452276.jpg?201331716523');"><img src="/UploadFiles/2021-03-30/2013417160452276.jpg?201331716523" alt="css3闪亮进度条效果实现思路及代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a><br>html源码： <br><br><u>复制代码</u>代码如下: <br><!DOCTYPE html> <br><html lang="en-US"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <br><title>New Pure CSS3 Progress Bars Demonstration</title> <br><meta name="description" content="Pure CSS3 progress bars demonstration by inWebson.com"/> <br><meta name="keywords" content="demonstration,demo,css3,progress,bar,loading,preloader,inwebson"/> <br><link rel="stylesheet" media="all" href="vendor.css"> <br><link rel="stylesheet" media="all" href="style.css"> <br><script src="/UploadFiles/2021-03-30/jquery.min.js"><script> <br>$(document).ready( function() { <br>var delay = 0; <br>$('.bar').children('span').each( function() { <br>var num = Math.floor(Math.random()*8)+2; <br>$(this) <br>.width(0) <br>.delay(delay) <br>.animate({ <br>'width': (num*10)+'%' <br>}, 3000); <br>delay += 1500; <br>}); <br>$('.source span').on('click', function() { <br>$(this) <br>.toggleClass('active') <br>.next().slideToggle(700); <br>}); <br>$('.source pre').slideUp(0); <br>}); <br></script> <br></head> <br><body> <br><!-- Content --> <br><section id="wrapper"> <br><div class="content-inner"> <br><section id="basic-bar" class="holder"> <br><h3>基本类型</h3> <br><div class="bar color0"> <br><span></span> <br></div> <br><div class="source"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar color0"> <br><span></span> <br></div> <br><hr/><!-- CSS --> <br>.bar { <br>margin: 5px 0 3px; <br>border: 6px solid #333; <br>background: #333; <br>overflow: hidden; <br>border-radius: 50px; <br>-moz-border-radius: 50px; <br>-webkit-border-radius: 50px; <br>box-shadow: 1px 1px 1px #777; <br>-moz-box-shadow: 1px 1px 1px #777; <br>-webkit-box-shadow: 1px 1px 1px #777; <br>} <br>.bar > span { <br>display: block; <br>height: 20px; <br>border-radius: 5px; <br>-moz-border-radius: 5px; <br>-webkit-border-radius: 5px; <br>} <br>.color0 > span { <br>background-color: #FF9932; <br>} <br></pre> <br></div> <br></section> <br><section id="gradient-bar" class="holder"> <br><h3>绿色渐变</h3> <br><div class="bar gradient color1"> <br><span></span> <br></div> <br><div class="source"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar gradient color1"> <br><span></span> <br></div> <br><hr/><!-- CSS --> <br>.gradient > span { <br>box-shadow: <br>0 5px 5px rgba(255,255,255,0.6) inset, <br>0 -5px 7px rgba(0, 0, 0, 0.4) inset; <br>-moz-box-shadow: <br>0 5px 5px rgba(255,255,255,0.6) inset, <br>0 -5px 7px rgba(0, 0, 0, 0.4) inset; <br>-webkit-box-shadow: <br>0 5px 5px rgba(255,255,255,0.6) inset, <br>0 -5px 7px rgba(0, 0, 0, 0.4) inset; <br>filter: progid:DXImageTransform.Microsoft.gradient( <br>startColorstr='#33ffffff', <br>endColorstr='#33000000', <br>GradientType=0 ); <br>} <br>.color1 > span { <br>background-color: #90EE90; <br>} <br></pre> <br></div> <br></section> <br><section id="gloss-bar" class="holder"> <br><h3>黄色渐变</h3> <br><div class="bar gradient gloss color2"> <br><span></span> <br></div> <br><div class="source medium"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar gradient gloss color2"> <br><span></span> <br></div> <br><hr/><!-- CSS --> <br>.gloss > span { <br>background-image: -moz-linear-gradient(top, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: -webkit-gradient(linear, left top, left bottom, <br>color-stop(0%,rgba(255,255,255,0.2)), <br>color-stop(45%,rgba(255,255,255,0.1)), <br>color-stop(55%,rgba(0,0,0,0.2)), <br>color-stop(100%,rgba(0,0,0,0.1))); <br>background-image: -webkit-linear-gradient(top, <br>rgba(255,255,255,0.5) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: -o-linear-gradient(top, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: -ms-linear-gradient(top, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: linear-gradient(to bottom, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>} <br>.color2 > span { <br>background-color: #dbf043; <br>} <br></pre> <br></div> <br></section> <br><section id="stripe-bar" class="holder"> <br><h3>蓝色条纹</h3> <br><div class="bar gradient stripe color3"> <br><span></span> <br></div> <br><div class="source medium"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar gradient stripe color3"> <br><span></span> <br></div> <br><hr/><!-- CSS --> <br>.stripe > span { <br>background-size:30px 30px; <br>-moz-background-size:30px 30px; <br>-webkit-background-size:30px 30px; <br>-o-background-size:30px 30px; <br>background-image: -moz-linear-gradient(-45deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: -webkit-gradient(linear, left top, right bottom, <br>color-stop(0%,rgba(255,255,255,0.2)), <br>color-stop(25%,rgba(255,255,255,0.2)), <br>color-stop(25%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0.2)), <br>color-stop(75%,rgba(255,255,255,0.2)), <br>color-stop(75%,rgba(255,255,255,0)), <br>color-stop(100%,rgba(255,255,255,0))); <br>background-image: -webkit-linear-gradient(-45deg, <br>rgba(255,255,255,0.3) 0%, <br>rgba(255,255,255,0.3) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.3) 50%, <br>rgba(255,255,255,0.3) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: -o-linear-gradient(-45deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: -ms-linear-gradient(-45deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: linear-gradient(135deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>} <br>.color3 > span { <br>background-color: #4169E1; <br>} <br></pre> <br></div> <br></section> <br><section id="stripe-animated-bar" class="holder"> <br><h3>动画条纹</h3> <br><div class="bar gradient stripe color4"> <br><span class="animate"></span> <br></div> <br><div class="source medium"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar gradient stripe color4"> <br><span class="animate"></span> <br></div> <br><hr/><!-- CSS --> <br>.color4 > span { <br>background-color: #4169E1; <br>} <br>.animate { <br>animation: progress 2s linear infinite; <br>-moz-animation: progress 2s linear infinite; <br>-webkit-animation: progress 2s linear infinite; <br>-ms-animation: progress 2s linear infinite; <br>-o-animation: progress 2s linear infinite; <br>} <br>@-webkit-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@-moz-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@-ms-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@-o-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br></pre> <br></div> <br></section> <br><section id="threed-animated-bar" class="holder"> <br><h3>3D效果</h3> <br><div class="bar gradient pattern2 color5"> <br><span class="animate"></span> <br></div> <br><div class="source medium"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar gradient stripe color6"> <br><span></span> <br></div> <br><hr/><!-- CSS --> <br>.pattern2 > span { <br>background-size: 10px 60px; <br>background-position: 0; <br>background-image: -moz-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: -webkit-gradient( radial, center center, 0, center center, 60, <br>color-stop(0, rgba(255,255,255,.9)), <br>color-stop(20%, rgba(255,255,255,.2)), <br>color-stop(40%, rgba(255,255,255,0)), <br>color-stop(100%, rgba(255,255,255,0))); <br>background-image: -webkit-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: -o-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: -ms-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: radial-gradient(ellipse at center, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>} <br>.color5 > span { <br>background-color: #4169E1; <br>} <br></pre> <br></div> <br></section> <br><section id="pattern-animated-bar" class="holder"> <br><h3>动画渐变</h3> <br><div class="bar gradient pattern color6"> <br><span> <br><span class="animate"></span> <br></span> <br></div> <br><div class="source medium"> <br><span>View Source</span> <br><pre> <br><!-- HTML --> <br><div class="bar gradient pattern color6"> <br><span> <br><span class="animate"></span> <br></span> <br></div> <br><hr/><!-- CSS --> <br>.pattern > span { <br>background-size: 13px, 29px, 37px, 53px; <br>background-image: <br>-moz-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-moz-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-moz-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-moz-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>-webkit-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-webkit-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-webkit-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-webkit-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,.07)), <br>color-stop(50%,rgba(255,255,255,.07)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0))), <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,.13)), <br>color-stop(50%,rgba(255,255,255,.13)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0))), <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0.17)), <br>color-stop(50%,rgba(255,255,255,0.17))), <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0.19)), <br>color-stop(50%,rgba(255,255,255,0.19))); <br>background-image: <br>-o-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-o-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-o-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-o-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>-ms-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-ms-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-ms-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-ms-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>linear-gradient(to right, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>linear-gradient(to right, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>linear-gradient(to right, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>linear-gradient(to right, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>} <br>.pattern > span > span { <br>display:block; <br>height:100%; <br>width:100%; <br>border-radius:5px; <br>-moz-border-radius:5px; <br>-webkit-border-radius:5px; <br>background-size: 12px; <br>background-image: -moz-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: -webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,0.1)), <br>color-stop(50%,rgba(255,255,255,0.1)), <br>color-stop(50%,rgba(255,255,255,0))); <br>background-image: -webkit-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: -o-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: -ms-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: linear-gradient(to right, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>} <br>.color6 > span { <br>background-color: #026873; <br>} <br></pre> <br></div> <br></section> <br></div> <br></section> <br></body> <br></html> <br><br>style.css： <br><br><u>复制代码</u>代码如下: <br>.holder{ <br>position:relative; <br>margin-bottom:10px; <br>} <br>.content-inner{ <br>width:500px; <br>margin:0 auto; <br>} <br>.content-inner h3{ <br>color:#fff; <br>margin:0 10px; <br>} <br>.content-inner .source.wide{ <br>width:1000px; <br>margin-left:-250px; <br>} <br>.content-inner .source.medium{ <br>width:650px; <br>margin-left:-75px; <br>} <br>.content-inner .source span{ <br>position:absolute; <br>top:7px; <br>right:10px; <br>color:#35BFFF; <br>font-size:12px; <br>cursor:pointer; <br>} <br>.content-inner .source span:after{ <br>content:' + '; <br>} <br>.content-inner .source span.active{ <br>color:#666; <br>} <br>.content-inner .source span.active:after{ <br>content:' - '; <br>} <br>.content-inner .source pre{ <br>color:#ccc; <br>background:#000; <br>border:1px solid #333; <br>padding:7px 15px; <br>box-shadow:0 0 7px #333; <br>} <br>.content-inner .source pre hr{ <br>border:none; <br>border-bottom:1px dashed #333; <br>} <br>.bar{ <br>margin:5px 0 3px; <br>border:6px solid #333; <br>background:#333; <br>overflow:hidden; <br>border-radius:50px; <br>-moz-border-radius:50px; <br>-webkit-border-radius:50px; <br>box-shadow:1px 1px 1px #777; <br>-moz-box-shadow:1px 1px 1px #777; <br>-webkit-box-shadow:1px 1px 1px #777; <br>} <br>.bar > span{ <br>display:block; <br>height:20px; <br>width:20%; <br>border-radius:5px; <br>-moz-border-radius:5px; <br>-webkit-border-radius:5px; <br>} <br>.gradient > span{ <br>box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; <br>-moz-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; <br>-webkit-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; <br>filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33000000',GradientType=0 ); <br>} <br>.gloss > span{ <br>background-image: -moz-linear-gradient(top, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: -webkit-gradient(linear, left top, left bottom, <br>color-stop(0%,rgba(255,255,255,0.2)), <br>color-stop(45%,rgba(255,255,255,0.1)), <br>color-stop(55%,rgba(0,0,0,0.2)), <br>color-stop(100%,rgba(0,0,0,0.1))); <br>background-image: -webkit-linear-gradient(top, <br>rgba(255,255,255,0.5) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: -o-linear-gradient(top, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: -ms-linear-gradient(top, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>background-image: linear-gradient(to bottom, <br>rgba(255,255,255,0.2) 0%, <br>rgba(255,255,255,0.1) 45%, <br>rgba(0,0,0,0.2) 55%, <br>rgba(0,0,0,0.1) 100%); <br>} <br>.stripe > span{ <br>background-size:30px 30px; <br>-moz-background-size:30px 30px; <br>-webkit-background-size:30px 30px; <br>-o-background-size:30px 30px; <br>background-image: -moz-linear-gradient(-45deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: -webkit-gradient(linear, left top, right bottom, <br>color-stop(0%,rgba(255,255,255,0.2)), <br>color-stop(25%,rgba(255,255,255,0.2)), <br>color-stop(25%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0.2)), <br>color-stop(75%,rgba(255,255,255,0.2)), <br>color-stop(75%,rgba(255,255,255,0)), <br>color-stop(100%,rgba(255,255,255,0))); <br>background-image: -webkit-linear-gradient(-45deg, <br>rgba(255,255,255,0.3) 0%, <br>rgba(255,255,255,0.3) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.3) 50%, <br>rgba(255,255,255,0.3) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: -o-linear-gradient(-45deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: -ms-linear-gradient(-45deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>background-image: linear-gradient(135deg, <br>rgba(255,255,255,0.15) 0%, <br>rgba(255,255,255,0.15) 25%, <br>rgba(255,255,255,0) 25%, <br>rgba(255,255,255,0) 50%, <br>rgba(255,255,255,0.15) 50%, <br>rgba(255,255,255,0.15) 75%, <br>rgba(255,255,255,0) 75%, <br>rgba(255,255,255,0) 100%); <br>} <br>.pattern > span{ <br>background-size: 13px, 29px, 37px, 53px; <br>background-image: <br>-moz-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-moz-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-moz-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-moz-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>-webkit-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-webkit-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-webkit-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-webkit-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,.07)), <br>color-stop(50%,rgba(255,255,255,.07)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0))), <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,.13)), <br>color-stop(50%,rgba(255,255,255,.13)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0))), <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0.17)), <br>color-stop(50%,rgba(255,255,255,0.17))), <br>-webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0)), <br>color-stop(50%,rgba(255,255,255,0.19)), <br>color-stop(50%,rgba(255,255,255,0.19))); <br>background-image: <br>-o-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-o-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-o-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-o-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>-ms-linear-gradient(left, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>-ms-linear-gradient(left, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>-ms-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>-ms-linear-gradient(left, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>background-image: <br>linear-gradient(to right, <br>rgba(255,255,255,0.07) 0%, <br>rgba(255,255,255,0.07) 50%, <br>transparent 50%), <br>linear-gradient(to right, <br>rgba(255,255,255,0.13) 0%, <br>rgba(255,255,255,0.13) 50%, <br>transparent 50%), <br>linear-gradient(to right, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.17) 50%), <br>linear-gradient(to right, <br>transparent 0%, <br>transparent 50%, <br>rgba(255,255,255,0.19) 50%); <br>} <br>.pattern > span > span{ <br>display:block; <br>height:100%; <br>width:100%; <br>border-radius:5px; <br>-moz-border-radius:5px; <br>-webkit-border-radius:5px; <br>background-size: 12px; <br>background-image: -moz-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: -webkit-gradient(linear, left top, right top, <br>color-stop(0%,rgba(255,255,255,0.1)), <br>color-stop(50%,rgba(255,255,255,0.1)), <br>color-stop(50%,rgba(255,255,255,0))); <br>background-image: -webkit-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: -o-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: -ms-linear-gradient(left, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>background-image: linear-gradient(to right, <br>rgba(255,255,255,0.1) 0%, <br>rgba(255,255,255,0.1) 50%, <br>transparent 50%); <br>} <br>.pattern2 > span{ <br>background-size: 10px 60px; <br>background-position: 0; <br>background-image: -moz-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: -webkit-gradient( radial, center center, 0, center center, 60, <br>color-stop(0, rgba(255,255,255,.9)), <br>color-stop(20%, rgba(255,255,255,.2)), <br>color-stop(40%, rgba(255,255,255,0)), <br>color-stop(100%, rgba(255,255,255,0))); <br>background-image: -webkit-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: -o-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: -ms-radial-gradient(center, ellipse cover, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>background-image: radial-gradient(ellipse at center, <br>rgba(255,255,255,.9) 0%, <br>rgba(255,255,255,.2) 20%, <br>transparent 40%); <br>} <br>.bar.color0 > span{ <br>background-color:#FF9932; <br>} <br>.bar.color1 > span{ <br>background-color:#90EE90; <br>} <br>.bar.color2 > span{ <br>background-color:#dbf043; <br>} <br>.bar.color3 > span{ <br>background-color:#4169E1; <br>} <br>.bar.color4 > span{ <br>background-color:#DA70D6; <br>} <br>.bar.color5 > span{ <br>background-color:#000; <br>} <br>.bar.color6 > span{ <br>background-color:#026873; <br>} <br>.animate{ <br>animation:progress 2s linear infinite; <br>-moz-animation:progress 2s linear infinite; <br>-webkit-animation:progress 2s linear infinite; <br>-ms-animation:progress 2s linear infinite; <br>-o-animation:progress 2s linear infinite; <br>} <br>@-webkit-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@-moz-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@-ms-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@-o-keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br>@keyframes progress { <br>from { <br>background-position: 0 0; <br>} <br>to { <br>background-position: -60px -60px; <br>} <br>} <br><br>vendor.css： <br><br><u>复制代码</u>代码如下: <br>body{ <br>font-family:Cambria, Georgia, serif; <br>line-height:1.6em; <br>font-size:100%; <br>background:url(bg.png) 0 0 repeat; <br>margin:0; <br>padding:0; <br>} <br>header, section, footer, nav, hgroup{ <br>display:block; <br>} <br>a{ <br>color:#35BFFF; <br>text-decoration:none; <br>transition:all 1s; <br>-moz-transition:all 1s; <br>-webkit-transition:all 1s; <br>-ms-transition:all 1s; <br>-o-transition:all 1s; <br>} <br>a:hover, a:active{ <br>color:#91DCFF; <br>} <br>img{ <br>max-width:100%; <br>} <br>a img{ <br>border:none; <br>} <br>/* Header */ <br>#header{ <br>width:100%; <br>background:#000; <br>background:rgba(0, 0, 0, 0.8); <br>color:#ccc; <br>letter-spacing:1px; <br>margin-bottom:20px; <br>padding:3px 0; <br>position:relative; <br>box-shadow:0 3px 10px #333; <br>-moz-box-shadow:0 3px 10px #333; <br>-webkit-box-shadow:0 3px 10px #333; <br>top:0; <br>left:0; <br>z-index:99; <br>} <br>#header h1{ <br>padding:0 20px; <br>margin:10px 0; <br>text-shadow:1px 1px 0 #FFF, 2px 1px 1px #CCC; <br>float:left; <br>} <br>#backlinks{ <br>float:right; <br>padding:5px 20px; <br>line-height:1.6em; <br>font-weight:bold; <br>font-size:11px; <br>font-family:'arial narrow', arial; <br>} <br>#backlinks a{ <br>text-align:right; <br>display:block; <br>} <br>/* Footer */ <br>#footer{ <br>position:relative; <br>bottom:0; <br>left:0; <br>padding-left:20px; <br>line-height:25px; <br>color:#888; <br>font-size:13px; <br>background:rgb(0, 0, 0); <br>background:rgba(0, 0, 0, 0.8); <br>box-shadow:0 -3px 10px #333; <br>-moz-box-shadow:0 -3px 10px #333; <br>-webkit-box-shadow:0 -3px 10px #333; <br>z-index:99; <br>} <br>#footer span{ <br>display:inline-block; <br>} <br>/* content header */ <br>#wrapper{ <br>position:relative; <br>margin:3em auto; <br>} <br>#wrapper h2{ <br>margin:0; <br>color:#0082E0; <br>text-shadow:1px 1px 1px #777; <br>font-size:33px; <br>font-family:Arial Narrow, Arial, sans-serif; <br>} <br>#wrapper h2 span{ <br>color:#56B8FF; <br>} <br>#wrapper hgroup h3{ <br>font-style:italic; <br>font-weight:normal; <br>font-size:18px; <br>text-shadow:0 1px 0 #fafafa; <br>color:#444; <br>margin:0; <br>} <br>.description{ <br>font-style:italic; <br>font-size:15px; <br>color:#aaa; <br>} <br>#ad-holder{ <br>position:absolute; <br>top:-40px; <br>right:10px; <br>} <br>#ad-holder div{ <br>text-align:right; <br>} <br>#ad-holder a{ <br>color:#ccc; <br>font-size:15px; <br>font-style:italic; <br>padding-left:10px; <br>} <br>/* clearfix */ <br>.clearfix { <br>clear:both; <br>} <br></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.paidiu.com/show/1/73396.html" title="将ul+li 分两列显示(横向显示)的方法">将ul+li 分两列显示(横向显示)的方法</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/73398.html" title="css图片垂直居中 css中如何实现图片垂直居中">css图片垂直居中 css中如何实现图片垂直居中</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/show/1/615886.html" title="群星.1992-音乐工厂2·首都【音乐工厂】【">群星.1992-音乐工厂2·首都【音乐工厂】【</a></li>
<li><a href="/show/1/615885.html" title="群星.1994-音乐工厂3·儿童乐园【音乐工厂">群星.1994-音乐工厂3·儿童乐园【音乐工厂</a></li>
<li><a href="/show/1/615884.html" title="胡鸿钧.2021-ex：CHANGE【星梦娱乐】【WAV">胡鸿钧.2021-ex：CHANGE【星梦娱乐】【WAV</a></li>
<li><a href="/show/1/615883.html" title="班得瑞原装进口《第一张新世纪专辑：仙境》">班得瑞原装进口《第一张新世纪专辑：仙境》</a></li>
<li><a href="/show/1/615882.html" title="伍佰《摇滚教父 伍佰黄金精选 2CD》[WAV+">伍佰《摇滚教父 伍佰黄金精选 2CD》[WAV+</a></li>
<li><a href="/show/1/615881.html" title="班得瑞原装进口《第二张新世纪专辑：寂静山">班得瑞原装进口《第二张新世纪专辑：寂静山</a></li>
<li><a href="/show/1/615880.html" title="Beyond.1989-真的见证（2024环球MQA-UHQCD">Beyond.1989-真的见证（2024环球MQA-UHQCD</a></li>
<li><a href="/show/1/615879.html" title="陈怡婷.2024-予你的心谁来赔【福茂】【FL">陈怡婷.2024-予你的心谁来赔【福茂】【FL</a></li>
<li><a href="/show/1/615878.html" title="陈冠希.2003-HITS.OR.MISSES【英皇娱乐】">陈冠希.2003-HITS.OR.MISSES【英皇娱乐】</a></li>
<li><a href="/show/1/615877.html" title="班得瑞原装进口《第三张新世纪专辑：春野》">班得瑞原装进口《第三张新世纪专辑：春野》</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>