<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position:relative; text-align: center; background:#212322; } h1{ color:#1A897A; font-family: "Palatino Linotype"; font-size: 60px; margin:40px; text-shadow: 2px 2px 0 #183e2b; } #demo-box{ width:550px; margin:40px auto; padding:40px 40px 20px; background:#c7e1d5; border-radius: 12px; overflow: hidden; } .button{ float:left; margin-bottom:30px; } #info-box{ clear:left; padding:20px 20px 10px; background:#abd5c1; border-radius: 10px; } p{ margin:0 0 1.2em; color:#333333; font-family: Arial; font-size: 13px; line-height: 1.3em; } #eg1{ background:url(img/background.png) no-repeat center -105px; display: block; width:5em; padding:30px 40px; text-align: center; font-family: Arial; font-size: 18px; color:#fff; text-decoration:none; text-shadow: 1px 1px 0 #000; border-radius:25px; background:url(img/linear-gradient.png) no-repeat 0px -400px,url(img/background.png) no-repeat center -8px; box-shadow: 2px 2px 10px #000; transition:all 1s ease; } #eg1:hover{ background:url(img/background.png) no-repeat center -5px; background:url(img/linear-gradient.png) no-repeat 0px 0px,url(img/background.png) no-repeat center -8px; } #eg2{ background: url(img/background.png) no-repeat center -105px; /* Fallback */ display: block; width: 5em; margin: 0px 20px; padding: 30px 40px; text-align: center; font-family: Arial, sans-serif; font-size: 18px; color: #fff; text-decoration: none; text-shadow: 1px 1px 0px #000; border-radius: 25px; background: url(img/stripes.png) no-repeat 0px 0px, url(img/background.png) no-repeat center -8px; box-shadow: 2px 2px 10px #000; transition: all 1s ease-out; } #eg2:hover { background: url(img/background.png) no-repeat center -5px; background: url(img/stripes.png) no-repeat 0px -200px, url(img/background.png) no-repeat center -8px; transition: all 0.5s ease; } #eg3 { background: url(img/background.png) no-repeat center -105px; display: block; width: 5em; padding: 30px 40px; text-align: center; font-family: Arial, sans-serif; font-size: 18px; color: #fff; text-decoration: none; text-shadow: 1px 1px 0px #000; border-radius: 25px; background: url(img/radial-gradient.png) no-repeat center center, url(img/background.png) no-repeat center -8px; box-shadow: 2px 2px 10px #000; background-size: 200px 200px, 180px 200px; transition: all 0.75s ease; } #eg3:hover { background: url(img/background.png) no-repeat center -5px; background: url(img/radial-gradient.png) no-repeat center center, url(img/background.png) no-repeat center -8px; background-size: 1000px 1000px, 180px 200px; transition: all 1s ease; } </style> </head> <body> <h1>CSS3动画暗角按钮</h1> <div id="demo-box"> <a id="eg1" class="button" href="#">Fade In</a> <a id="eg2" class="button" href="#">Peer Thro'</a> <a id="eg3" class="button" href="#">Iris</a> <div id="info-box"> <p>These buttons are made by styling a single anchor element with CSS3 multiple backgrounds. They use two img - a background pattern and then a semi-transparent .png 'vignette' which sits over the top. The vignette position or size is then animated using the transition property in Chrome, Safari and Firefox 4. <p>They fallback nicely in browsers that don't fully support the CSS3 properties in use.</p> <p>For more info check out the source or this accompanying article.</p> </div> </div> </body> </html>