0

ユーザーがボタンをクリックしたときに、CSS3 の背景をぼかすソリューションを探していました。

現時点では、HTML は次のとおりです。

<div class="button">
    <li><a href="#" alt="fade button">Start Now</a></li>
</div>

CSS は次のとおりです。

html, body { margin:0px; padding: 0px; background: url(../assets/background.png) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;}

.button { 
    vertical-align: middle;
    width:150px; 
    margin: 0 auto;  
    margin-top:200px;
    background-color:#81DF7B;
    padding:10px;
    border-radius: 5px;
    text-decoration: none;
    color:#333;
    font-weight:300;
    font-size: 1.3em;
    -webkit-transition: background-color 0.3s ease-in-out 0s;
    -moz-transition: background-color 0.3s ease-in-out 0s;
    -o-transition: background-color 0.3s ease-in-out 0s;
    -ms-transition: background-color 0.3s ease-in-out 0s;
    transition: background-color 0.3s ease-in-out 0s;
}

.button:hover{ 
    background-color: #00CC33; 
    cursor:pointer;
}

.button li {padding:20px; text-align:center; text-decoration: none; list-style: none; }
.button li a {text-decoration: none;}

ご覧のとおり、背景画像は CSS3 カバー画像として html と body に添付されています。

私が望むのは、ユーザーが [今すぐ開始] ボタンをクリックすると、この背景がスムーズにぼかしに移行して、非表示のフォーム フィールドが上にはっきりと表示されるようにすることです。

私は blur.js と Jquery のぼかしを見てきましたが、これを実装する最善の方法を見つけることができません。

どんなアドバイスでも大歓迎です:)

4

1 に答える 1

1

そのボタンの onclick イベントに対して、このような css を実装できます。

.background {     

-webkit-filter: blur(10px);     

filter: blur(10px);      

}
于 2013-08-20T17:15:33.283 に答える