点击这里查看效果

以下是源代码：

 <!doctype html>

 <html>

 <!-- author: @simurai -->

 <head>

 <title>CSS3神奇的按钮-柯乐义</title>

 <meta charset="utf-8">

 <style>

 /* This is just the basic styling for the whole page. */

 /* Global ------------------------------------------------------ */

 html {

 font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;

 background-color: hsl(200,5%,15%);

 background-size: 5px 5px;

 background-image: -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px,

 hsla(0,0%,0%,.10) 50%,

 hsla(0,0%,0%,0) 100% );

 }

 body {

 margin: 0;

 }

 /* list ------------------------------------------------------ */

 ul {

 list-style: none;

 padding: 50px 0;

 margin: 0;

 font-size: 2em;

 text-align: center;

 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,100%,0) 0px,

 hsla(0,0%,100%,.09) 50%,

 hsla(0,0%,100%,0) 100% );

 }

 ul li {

 padding: 50px 0;

 }

 /* Aside ------------------------------------------------------ */

 aside {

 position: fixed;

 top: 20px;

 left: 20px;

 }

 aside button {

 margin: 0;

 padding: 10px ;

 border: none;

 border-radius: 5px;

 font-weight: bold;

 color: hsl(200,100%,60%);

 background: hsla(0,0%,0%,.12);

 cursor: pointer;

 }

 aside button:hover {

 background: hsla(0,0%,0%,.2);

 }

 aside button:active {

 -webkit-transform: translateY(1px);

 }

 /*

 * umbrUI meter input by @simurai

 */

 /* -------------- meter -------------- */

 meter:nth-child(1) { -webkit-transform: translate(-50px, 50px) rotate(-90deg); }

 meter:nth-child(2) { -webkit-transform: translate( -25px, 25px) rotate(-90deg); }

 meter:nth-child(3) { -webkit-transform: translate( 0px, 0px) rotate(-90deg); }

 meter:nth-child(4) { -webkit-transform: translate( 25px, -25px) rotate(-90deg); }

 meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); }

 meter {

 -webkit-appearance: none;

 position: relative;

 display: block;

 margin: 8px auto;

 width: 100px;

 height: 17px;

 border-radius: 5px;

 padding: 4px 5px 4px 5px;

 box-sizing: border-box;

 background: #000;

 -webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08);

 -webkit-transform-origin: center 8px;

 }

 meter::-webkit-meter-bar {

 background-color: hsl(200,10%,14%);

 background-size: 2px 5px;

 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),

 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );

 }

 meter::-webkit-meter-optimum-value,

 meter::-webkit-meter-suboptimum-value,

 meter::-webkit-meter-even-less-good-value {

 background-size: inherit;

 background-image: inherit;

 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);

 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);

 }

 /* With these pseudo selectors you could change the colors when changing the value. */

 meter::-webkit-meter-optimum-value { background-color: hsl(200,100%,50%); }

 meter::-webkit-meter-suboptimum-value { background-color: hsl(200,100%,50%); }

 meter::-webkit-meter-even-less-good-value { background-color: hsl(200,100%,50%); }

 meter:hover::-webkit-meter-optimum-value,

 meter:hover::-webkit-meter-suboptimum-value,

 meter:hover::-webkit-meter-even-less-good-value {

 /*In the real world, just change the element's value, this is just a hack for this demo.*/

 width: 100% !important;

 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);

 }

 /*

 * umbrUI range slider by @simurai

 */

 /* -------------- Range Slider -------------- */

 input[type="range"] {

 -webkit-appearance:    none;    /* Remove Safari default */

 outline: none;

 width: 250px;

 height: 5px;

 border-radius: 1px;

 position: relative;

 background-color: #000;

 -webkit-background-clip: padding-box;

 border: 0;

 border-bottom: 1px solid rgba(255,255,255,0.1);

 cursor: ew-resize;

 }

 input[type="range"]::-webkit-slider-thumb {

 -webkit-appearance:    none;    /* Remove Safari default */

 position: relative;

 z-index: 1;

 width: 26px;

 height: 40px;

 border-radius: 3px / 6px ;

 background-image: -webkit-gradient( linear, left top, right top,

 color-stop( 0, hsl(0,0%,15%) ),

 color-stop( .16, hsl(0,0%,22%) ),

 color-stop( .18, hsl(0,0%,30%) ),

 color-stop( .2, hsl(0,0%,26%) ), 

 color-stop( .42,    hsl(200,60%,30%) ),

 color-stop( .44,    hsl(200,0%,15%) ),

 color-stop( .46,    hsl(200,100%,50%) ),

 color-stop( .54,    hsl(200,100%,50%) ),

 color-stop( .56,    hsl(200,0%,15%) ),

 color-stop( .58,    hsl(200,60%,30%) ), 

 color-stop( .8,     hsl(0,0%,26%) ),

 color-stop( .82,    hsl(0,0%,30%) ),

 color-stop( .84,    hsl(0,0%,22%) ),

 color-stop( 1, hsl(0,0%,15%) )

 );

 -webkit-box-shadow: 

 inset hsla(0,0%,100%,.15) 0 1px 0px,

 hsl(0,0%,17%) 0 2px 0px,

 hsl(0,0%,15%) 0 4px 0px,

 hsl(0,0%,13%) 0 6px 0px,

 rgba(0,0,0,.5) 0 8px 5px;

 -webkit-transform: translateY(-3px);

 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,

 from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) ));

 }

 input[type="range"]:hover {

 background-image: -webkit-gradient( linear, left top, right top,

 color-stop( 0, hsl(200,80%,45%) ),

 color-stop( .08, hsl(200,80%,15%) ),

 color-stop( .5, hsl(200,80%,0%) ),

 color-stop( .92,    hsl(200,80%,15%) ),

 color-stop( 1, hsl(200,80%,45%) )

 );

 -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px;

 }

 /*

 * umbrUI checkboxes by @simurai

 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" />

 */

 /* ----------- Checkbox */

 input[type="checkbox"] {

 -webkit-appearance:none;    /* Remove Safari default */

 outline: none;

 width: 120px;

 height: 40px;

 position: relative;

 border-radius: 6px;

 background-color: #000;

 -webkit-background-clip: padding-box;

 border: 0;

 border-bottom: 1px solid transparent;

 -webkit-perspective: 200;

 }

 input[type="checkbox"]:before, input[type="checkbox"]:after {

 font: bold 22px/32px sans-serif;

 text-align: center;

 position: absolute;

 z-index: 1;

 width: 56px;

 height: 30px;

 top: 4px;

 border: 0;

 border-top: 1px solid rgba(255,255,255,0.15);

 }

 input[type="checkbox"]:before {

 content: attr(data-icon1);

 left: 4px;

 border-radius: 3px 0 0 3px;

 }

 input[type="checkbox"]:after {

 content: attr(data-icon2);

 right: 4px;

 border-radius: 0 3px 3px 0;

 }

 /* ----------- checked/unchecked */

 /* unchecked */

 input[type="checkbox"] {

 -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%,

 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)),

 color-stop(.1,rgba(255,255,255,.05)),

 color-stop(.3,rgba(5,137,200,0.4)),

 color-stop(.45,rgba(255,255,255,.05)),

 color-stop(.9,rgba(255,255,255,.1))

 )100% 100%;

 background-image: -webkit-gradient(

 linear, right top, left top,

 color-stop( 0, hsl(0,0%,0%) ),

 color-stop( 0.14, hsl(0,0%,50%) ),

 color-stop( 0.15, hsl(0,0%,0%) )

 );

 -webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;

 }

 input[type="checkbox"]:after {

 background-image: -webkit-gradient(linear, 70% top, 40% bottom,

 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) )

 );

 border-right: 1px solid transparent;

 -webkit-border-image: -webkit-gradient(linear, left bottom, left top,

 from(rgba(255,255,255,0)),

 color-stop(.2,rgba(255,255,255,0)),

 color-stop(.4,rgba(255,255,255,.5)),

 to(rgba(255,255,255,.05))

 )10% 100%;

 -webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;

 -webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);

 }

 /* checked */

 input[type="checkbox"]:checked {

 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%,

 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)),

 color-stop(.1,rgba(255,255,255,.05)),

 color-stop(.3,rgba(5,137,200,0.4)),

 color-stop(.45,rgba(255,255,255,.05)),

 color-stop(.9,rgba(255,255,255,.1))

 )100% 100%;

 background-image: -webkit-gradient(

 linear, left top, right top,

 color-stop( 0, hsl(0,0%,0%) ),

 color-stop( 0.14, hsl(0,0%,50%) ),

 color-stop( 0.15, hsl(0,0%,0%) )

 );

 -webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;

 }

 input[type="checkbox"]:checked:before {

 background-image: -webkit-gradient( linear, 30% top, 60% bottom,

 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) )

 );

 border-left: 1px solid transparent;

 -webkit-border-image: -webkit-gradient(linear, left bottom, left top,

 from(rgba(255,255,255,0)),

 color-stop(.2,rgba(255,255,255,0)),

 color-stop(.4,rgba(255,255,255,.5)),

 to(rgba(255,255,255,.05))

 )10% 100%;

 -webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;

 -webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);

 }

 /* ----------- active/inactve */

 /* Active */

 input[type="checkbox"]:before, input[type="checkbox"]:checked:after {

 color: hsl(200,100%,50%);

 text-shadow: rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;

 -webkit-transform: none;

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,20%) ), to( hsl(0,0%,15%) )

 );

 -webkit-border-image: none;

 -webkit-box-shadow: none;

 z-index: 2;

 }

 /* Inactive */

 input[type="checkbox"]:after, input[type="checkbox"]:checked:before {

 color: #000;

 text-shadow: rgba(255,255,255,.1) 0 -1px 0;

 -webkit-box-reflect: none;

 z-index: 1;

 }

 /* ----------- hover */

 input[type="checkbox"]:hover {

 cursor: pointer;

 }

 input[type="checkbox"]:hover:before {

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,19%) ), to( hsl(0,0%,15%) )

 );

 }

 input[type="checkbox"]:hover:after {

 background-image: -webkit-gradient(linear, 70% top, 40% bottom,

 from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) )

 );

 }

 input[type="checkbox"]:checked:hover:before {

 background-image: -webkit-gradient( linear, 30% top, 60% bottom,

 from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) )

 );

 }

 input[type="checkbox"]:checked:hover:after {

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,19%) ), to( hsl(0,0%,15%) )

 );

 }

 /*

 * umbrUI number input by @simurai

 */

 @import url(http://fonts.googleapis.com/css?family=VT323);

 /* -------------- number -------------- */

 input[type="number"] {

 -webkit-appearance:    none;

 outline: none;

 position: relative;

 z-index: 1;

 width: 120px;

 height: 60px;

 border-radius: 40px / 60px; 

 font-family: 'VT323', cursive;

 font-size: 36px;

 line-height: 40px;

 text-align: center;

 -webkit-font-smoothing: none;

 color: hsl(200,100%,50%);

 text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%);

 border: 0;

 background-color: hsl(200,10%,12%);

 background-size: 4px 4px;

 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ),

 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );    

 -webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1),

 inset 0 0 20px 5px hsla(0,0%,0%,.5),

 0 0px 0px 1px hsla(0,0%,0%,.4),

 0 1px 0 hsla(0,0%,100%,.25);

 }

 /* Outer spin only works in Safari, so lets hide it */

 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

 /* Spin button */

 input[type="number"]::-webkit-inner-spin-button {

 -webkit-appearance: none;

 width: 32px;

 border-radius: 40px / 60px;

 border: 4px solid #000;

 cursor: ns-resize;

 -webkit-box-shadow: inset 0px 0px 3px 1px hsla(0,0%,0%,.6),

 inset 0px 6px 1px -2px hsla(0,0%,100%,.30),

 inset 0px -7px 1px -1px hsla(0,0%,0%,.5);

 background-color: hsl(0,0%,20%);

 background-image: 

 -webkit-radial-gradient( 50% 5%, contain, hsla(0,0%,100%,.2) 0%, hsla(0,0%,0%,0) 70% ),

 -webkit-radial-gradient( 50% 86%, contain, hsla(0,0%,100%,.05) 0%, hsla(0,0%,0%,0) 80% ),

 -webkit-linear-gradient( -90deg, hsl(0,0%,15%) 0%,

 hsl(0,0%,18%) 48%,

 hsl(0,0%,10%) 48%,

 hsl(0,0%,27%) 52%,

 hsl(0,0%,20%) 52%,

 hsl(0,0%,34%) 100% );

 -webkit-transition: border-color .2s ease-in-out;

 }

 /* :active */

 input[type="number"]:active::-webkit-inner-spin-button {

 border-color: hsla(200,100%,50%,1);

 -webkit-box-shadow: inset 0px 0px 3px 1px hsla(200,100%,20%,.6),

 inset 0px 6px 1px -2px hsla(200,100%,70%,.4),

 inset 0px -7px 1px -1px hsla(200,100%,10%,.5),

 0px 0px 4px 3px hsla(200,100%,50%,.3);

 -webkit-transition: none;

 }

 /*

 * umbrUI radio buttons by @simurai

 */

 /* ----------- radio */

 input[type="radio"] {

 -webkit-appearance:none;    /* Remove Safari default */

 outline: none;

 width: 68px;

 height: 80px;

 position: relative;

 display: inline-block;

 margin: 3px;

 border-radius: 6px;

 background-color: #000;

 -webkit-background-clip: padding-box;

 border: 0;

 border-bottom: 1px solid rgba(255,255,255,0.1);

 -webkit-perspective: 200;

 }

 input[type="radio"]:before {

 content: attr(data-icon);

 font: 22px/22px sans-serif;

 text-shadow: rgba(255,255,255,0.08) 0 -1px 0;

 line-height: 40px;

 text-align: center;

 position: absolute;

 z-index: 10;

 width: 60px;

 height: 70px;

 margin: 4px;

 border-radius: 3px;    

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,20%) ), to( hsl(0,0%,15%) )

 );

 border-top: 1px solid rgba(255,255,255,0.15);

 }

 input[type="radio"]:after {

 content: "";

 z-index: 12;

 position: absolute;

 margin: 3px;

 border-radius: 3px;

 left: 6px;

 top: 62px;

 width: 50px;

 height: 5px;

 -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.1) 0 1px 1px;

 }

 /* ----------- checked */

 input[type="radio"]:active, input[type="radio"]:checked {

 -webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0px 4px;

 background-image: -webkit-gradient(

 linear, left top, left bottom,

 color-stop( 0, hsl(0,0%,10%) ),

 color-stop( 0.14, hsl(0,0%,30%) ),

 color-stop( 0.15, hsl(0,0%,0%) )

 );

 }

 input[type="radio"]:active:before, input[type="radio"]:checked:before {

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,19%) ), to( hsl(0,0%,12%) )

 );

 z-index: 11;

 border: 0;

 border-top: 1px solid transparent;

 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%,

 color-stop(0, hsla(200,100%,85%,.05)),

 color-stop(.5, hsl(200,0%,40%)),

 color-stop(1, hsla(200,100%,80%,.05))

 )50% 100%;

 -webkit-box-shadow: 0px 2px 1px 1px hsl(0,0%,13%);

 -webkit-transform: rotateX(-25deg) scaleX(.95) translateY(4px);

 }

 input[type="radio"]:checked:before {

 color: hsl(200,100%,50%);

 text-shadow: rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;

 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%,

 color-stop(0, hsla(200,100%,85%,.05)),

 color-stop(.5, hsl(200,20%,50%)),

 color-stop(1, hsla(200,100%,80%,.05))

 )50% 100%;

 }

 input[type="radio"]:active:after, input[type="radio"]:checked:after {

 top: 59px;

 -webkit-transform: scale(.9);

 opacity: .4;

 }

 /* ----------- hover */

 input[type="radio"]:hover {

 cursor: pointer;

 }

 input[type="radio"]:checked {

 cursor: default;

 }

 input[type="radio"]:hover:before {

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,19.5%) ), to( hsl(0,0%,14%) )

 );

 }

 input[type="radio"]:checked:hover:before {

 background-image: -webkit-gradient( linear, left top, left bottom,

 from( hsl(0,0%,19%) ), to( hsl(0,0%,12%) )

 );

 }

 /*

 * umbrUI progress input by @simurai

 */

 /* -------------- progress -------------- */

 progress {

 -webkit-appearance: none;

 position: relative;

 width: 150px;

 height: 17px;

 border-radius: 5px;

 padding: 4px;

 background: #000;

 -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1);

 /*Disabled for now.

 -webkit-box-reflect: below -3px -webkit-radial-gradient( 50% 70%, 50% 25%, hsla(0,0%,0%,.2) 0%, hsla(0,0%,0%,0) 95% );*/

 }

 progress::-webkit-progress-bar {

 background-color: hsl(200,10%,14%);

 background-size: 2px 5px;

 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),

 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );

 }

 progress::-webkit-progress-value {

 background-size: inherit;

 background-image: inherit;

 background-color: hsl(200,100%,50%);

 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);

 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);

 }

 progress:hover::-webkit-progress-value {

 /*In the real world, just change the element's value, this is just a hack for this demo.*/

 width: 100% !important;

 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);

 }

 </style>

 <script>

 var rel = "stylesheet";

 function toggleUmbrUI() {

 if (rel == "stylesheet") {

 rel = ""

 } else {

 rel = "stylesheet"

 }

 var allsuspects = document.getElementsByClassName('umbrui');

 for (var i = allsuspects.length; i > 0; i--) {

 //console.log(allsuspects[i]);

 console.log(allsuspects[i - 1].href);

 allsuspects[i - 1].rel = rel;

 }

 }

 //toggleUmbrUI();

 </script>

 </head>

 <body>

 <div>请使用支持CSS3的浏览器查看本页。<a href="http://keleyi.com/a/bjac/3t0molka.htm" target="_blank">原文</a></div>

 <ul>

 <!-- meter -->

 <li>

 <meter value="0.3"></meter>

 <meter value="0.2"></meter>

 <meter value="0.16"></meter>

 <meter value="0.2"></meter>

 <meter value="0.3"></meter>

 </li>

 <!-- range -->

 <li>

 <input type="range" />

 </li>

 <!-- checkbox -->

 <li>

 <input type="checkbox" data-icon1="♀" data-icon2="♂" />

 </li>

 <!-- number -->

 <li>

 <input type="number" min="1" max="99" value="78" />

 </li>

 <!-- radio -->

 <li>

 <input type="radio" name="radio" data-icon="❮❮" /><input type="radio" name="radio" data-icon="►" /><input type="radio" name="radio" data-icon="❯❯" />

 </li>

 <!-- progress -->

 <li>

 <progress value="0.3"></progress>

 </li>

 </ul>

 <aside>

 <button onclick="toggleUmbrUI()">柯乐义 CSS3特效</button>

 </aside>

 </body>

 </html>

roucheng

转载自：http://keleyi.com/a/bjac/3t0molka.htm

http://www.cnblogs.com/roucheng/

神奇的CSS3按钮特效的更多相关文章

  1. CSS3 按钮特效(一)

    1. 实例 2.HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 10款CSS3按钮 - 程序员再也不用为按钮设计而发愁了...

    这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按 ...

  3. 10款CSS3按钮 - 再也不用为按钮设计而发愁了

    这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按 ...

  4. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  5. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  6. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

  7. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  8. css3 javascript 实现菜单按钮特效

    一个菜单按钮特效案例,简单的实现了动态效果. 代码效果预览地址: http://code.w3ctech.com/detail/2504 <div class="bar" i ...

  9. 5种漂亮的纯CSS3动画按钮特效

    这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...

随机推荐

  1. ENode框架Conference案例分析系列之 - 事件溯源如何处理重构问题

    前言 本文可能对大多数不太了解ENode的朋友来说,理解起来比较费劲,这篇文章主要讲思路,而不是一上来就讲结果.我写文章,总是希望能把自己的思考过程尽量能表达出来,能让大家知道每一个设计背后的思考的东 ...

  2. Redis系列(四)-低成本高可用方案设计

    关于Redis高可用方案,看到较多的是keepalived.zookeeper方案. keepalived是主备模式,意味着总有一台浪费着.zookeeper工作量成本偏高. 本文主要介绍下使用官方s ...

  3. SQL Server 深入解析索引存储(下)

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/索引体系结构/非聚集索引 概述 非聚集索引与聚集索引具有相同的 B 树结构,它们之间的显著差别在于以下两点: 基础表的数据行不按非 ...

  4. IE浏览器打开chorme浏览器，如何打开其他浏览器

    看到这个标题是否感觉奇怪,为什么要用IE浏览器打开chorme或者火狐浏览器等,这个功能从开发者来说不是一个好的需求,但确实是真实存在的,有用公司的背景历史比较复杂,而且公司有过长期的开发历史,这导致 ...

  5. Python3 的json 和 PHP的json

    Python3操作json的标准api库参考:https://docs.python.org/3/library/json.html#module-json >>> aa = ['/ ...

  6. 基于Spring Mvc实现的Excel文件上传下载

    最近工作遇到一个需求,需要下载excel模板,编辑后上传解析存储到数据库.因此为了更好的理解公司框架,我就自己先用spring mvc实现了一个样例. 基础框架 之前曾经介绍过一个最简单的spring ...

  7. How to Use Android ADB Command Line Tool

    Android Debug Bridge (adb) is a tool that lets you manage the state of an emulator instance or Andro ...

  8. MVC与WebForm的区别

    在初步了解MVC后,发现很多人对于MVC和三层架构开发概念上会有很大的混淆,所以把这两天的学习笔记整理一下,分享给自己的同学们.同时也做一个小Demo,让没有接触过MVC开发的同学,能对MVC有一个简 ...

  9. MyEclipse中屏蔽js检验

    方法一: 右键工程-->properties-->Myeclipse-->validation-->Excluded Resource,勾选需要取消验证的文件或者文件夹就可以了 ...

  10. javascript运动系列第九篇——碰撞运动

    × 目录 [1]碰撞检测 [2]无损碰撞 [3]有损碰撞 前面的话 碰撞可以分为碰壁和互碰两种形式,上篇介绍了碰壁运动,本文将从浅入深地介绍碰撞运动的互碰形式 碰撞检测 对于互碰形式的碰撞运动来说,首 ...