CSS 实现 光圈效果

html-css07

CSS 实现 光圈效果,第1张

主要利用css3 animation, 在0 ~ 100% 过渡中让box-shadow渐变(box-shadow只需要设置blur 和spread)

HTML:

CSS:

预览效果入如下:

.xx{  box-shadow: 0 0 15px #4E4E4E padding:10px }

这两个0是  左右  上下。用px调整。如果是0就是居中。

15px是你要光圈。越大就范围就越广。类似于病毒扩散那种感觉.padding可无视,是为了放你class一个span或button自己就撑开了

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$("#search").click(function () {

$("#load").fadeIn("slow")

})

})

</script>

</head>

<body>

<div id="load" style="display: none">

<img alt="waiting..." src="images/wait.gif" />

加载中,请稍等...

</div>

<input id="search" type="button" value="查询" />

</body>

</html>