.logo-site,.logo-sites{position:relativefloat:leftmargin:18px 0 0 10pxwidth:220pxmax-height:50pxoverflow:hiddentransition-duration:.5s}
.logo-site img,.logo-sites img{width:220pxmax-height:50px}@media screen and (max-width:480px){
.logo-site,.logo-sites{width:140px}}@media screen and (min-width:900px){
.logo-site:before{content:""position:absoluteleft:-665pxtop:-460pxwidth:220pxheight:15pxbackground-color:rgba(255,255,255,.5)-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-animation:searchLights 1s ease-in 1s infinite-o-animation:searchLights 1s ease-in 1s infiniteanimation:searchLights 1s ease-in 1s infinite}}@-webkit-keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}@-o-keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}@-moz-keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}@keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}
.site-title{font-size:24pxfont-size:2.4remfont-weight:700padding:0 0 2px 0}
.site-name{display:none}@media screen and (min-width:900px){
.logo-site img,.logo-sites img{transition-duration:.8s}
操作流程
把css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素，即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称，放入css代码当中即可(防止出错，记得备份!)
以上就是logo添加css扫光效果的方法，当然你也可以运用到其他的地方。
注意，有些模板CSS代码不相同，不能贸然的使用，可能会出现错误，新手不要尝试。
我们经常在看一些视频的视频，都能够看到类似于字体扫光的动效，意思就是光效会随着时间进行扫射，看起来是很炫酷的，其实这样的动效是比较好做的，今天就来教你如何制作文字扫光效果。
01打开电脑中的AE软件，ctrl+N先新建一个合成，时间不用太长，帧速率为30f就行了。
02创建合成之后，利用文字工具在合成中添加一段文本信息。
03文本信息添加之后，点击文本图层，然后在菜单中选择“效果-模糊和锐化-CC Radial Fast Blur效果。
04点选效果之后，左上方会出现效果空间，在这里调整数值就行了，我们主要是要调整center中心点这个数值。
05在一开始后的时候，将center的x数值设置为0.
06center设置为0之后，在初始位置打个关键帧，并且将amount设置为75，并且打上关键帧。
07接着我们将center的x位置调整到最大，意思就是移动到最右侧。
08在动画最后打上center的关键帧，同时将amount设置为80，这样就行了。
09效果制作完成之后按空格键即可预览，选择“合成-添加到渲染队列”即可导出。
如何用css做按钮点击后发光效果怎么做？这个问题只能用代码的形式来解答,如下：
http://www.jqueryba.com/jquery/css3buttom.html
.btn-wrap {
text-align: center
margin: 50px
}
.btn{
position: relative
display: inline-block
line-height: 25px
padding: 5px 15px
margin:10px
transition: all .3s ease-out
text-transform: uppercase
border-radius: 5px
border: 1px solid #1e639a
color: #fff
font-weight: bold
cursor: pointer
text-shadow:0 1px 2px rgba（0,0,0,.4）；
box-shadow: inset 1px 0 0 #559ad5,inset -1px 0 0 #559ad5,inset 0 1px 0 #559ad5,inset 0 -1px 0 #559ad5,0 0 1px rgba（0,0,0,0.5）；
background: #4086c2/* Old browsers */
background: -*-linear-gradient（to bottom, #4086c2 0%,#2989d8 100%,#3378b1 100%）；
}
.btn:hover {
background: #3378b1/* Old browsers */
background: -*-linear-gradient（to bottom, #3378b1 0%,#2989d8 0%,#4086c2 100%）；
}
.btn:active:after {
content: ""
display:block
width: 2px
height: 2px
position:absolute
border-radius:2px
top:50%
left: 50%
margin: -1px 0 0 -1px
z-index:2
background: rgba（255,255,255,1）；
box-shadow:0 0 10px 5px rgba（255,255,255,0.5），
0 0 20px 10px rgba（255,255,255,0.5），
0 0 30px 15px rgba（255,255,255,0.4），
0 0 40px 20px rgba（255,255,255,0.3），
0 0 50px 25px rgba（255,255,255,0.3），
0 0 60px 30px rgba（255,255,255,0.3），
0 0 70px 35px rgba（255,255,255,0.3）；
