首页 > 代码库 > [CSS3] 动画暗角按钮

[CSS3] 动画暗角按钮

2024-09-26 03:41:39   218人阅读

<!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>

 

[CSS3] 动画暗角按钮


联系
我们