站长资源网页制作
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.wwsws.com/show/1/73396.html" title="将ul+li 分两列显示(横向显示)的方法">将ul+li 分两列显示(横向显示)的方法</a></p>
<p>下一篇：<a href="http://m.wwsws.com/show/1/73398.html" title="css图片垂直居中 css中如何实现图片垂直居中">css图片垂直居中 css中如何实现图片垂直居中</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623322.html" one-link-mark="yes" title="群星《奔赴！万人现场 第2期》[FLAC/分轨][518.87MB]"><span>群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623321.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[320K/MP3][43.91MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623320.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FLAC/分轨][140.49MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623319.html" one-link-mark="yes" title="【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]"><span>【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623318.html" one-link-mark="yes" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]"><span>贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623317.html" one-link-mark="yes" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]"><span>小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623316.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]"><span>群星《欢迎来到我身边 电影原声专辑》[320K/MP3</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623315.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]"><span>群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623314.html" one-link-mark="yes" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]"><span>雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/623313.html" one-link-mark="yes" title="群星《2024好听新歌42》AI调整音效【WAV分轨】"><span>群星《2024好听新歌42》AI调整音效【WAV分轨】</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604690.html"><ul>Windows上运行安卓你用过了吗<br><br>在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。</ul></a></div>
</div>
</article>
<footer>
<p>友情链接:<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="http://www.paidiu.com/" 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.wwsws.com">伏龙阁资源网</a> <a href="/">http://m.wwsws.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>