把你找到的css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素，即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称，放入css代码当中即可(防止出错，记得备份!)
以上就是logo添加css扫光效果的方法，当然你也可以运用到其他的地方。
<div class="demo-container demo"><style type="text/css">
.demo{
width: 300px
}
.chrome {
position:relative
width:300px
height:300px
overflow:hidden
border-radius:300px
}
.chrome div {
position:absolute
text-indent:-9999px
}
.chrome_heart_white {
z-index:100
top:95px
left:95px
width:110px
height:110px
background:#fff
border-radius:110px
overflow:hidden
}
.chrome_heart {
top:10px
left:10px
width:90px
height:90px
background:#f00
border-radius:90px
background:-webkit-gradient(linear, left top, left bottom, from(#80B1DA), to(#165E98))
}
.chrome_wrap {
z-index:100
top:-100px
left:-100px
width:300px
height:300px
border-radius:300px
border:100px solid #fff
}
.chrome_part_color {
width:200px
height:210px
opacity:0.94
}
.chrome_part_red {
z-index:3
top:-44px
left:55px
-webkit-transform:rotate(60deg)
border-bottom-right-radius:30px
background:-webkit-gradient(radial, 20% 30%, 20, 40% 30%, 100, from(#ED5F51), to(#DF2228))
}
.chrome_part_red2 {
z-index:9
width:160px
height:80px
top:50px
left:18px
-webkit-transform:rotate(60deg)
background:-webkit-gradient(radial, 30% 0, 30, 40% 30%, 60, from(#E54745), to(#E12F35))
}
.chrome_part_yellow {
z-index:5
top:95px
right:-30px
border-top-left-radius:30px
background:-webkit-gradient(radial, 30% 40%, 130, 40% 20%, 60, from(#DBA328), to(#FDD207))
}
.chrome_part_green {
z-index:7
top:82px
left:-25px
-webkit-transform:rotate(117deg)
border-top-left-radius:30px
background:-webkit-gradient(radial, 30% 40%, 120, 30% 40%, 60, from(#419643), to(#4DB749))
}
.chrome_mask_color {
width:110px
height:110px
background:#fff
}
.chrome_mask_red {
z-index:8
height:40px
top:60px
left:25px
-webkit-transform:rotate(50deg)
background:#E12F35
}
.chrome_mask_yellow {
z-index:4
top:105px
right:-10px
-webkit-transform:rotate(-12deg)
}
.chrome_mask_green {
z-index:6
top:185px
left:38px
-webkit-transform:rotate(15deg)
}
</style>
<div class="chrome">
<div class="chrome_part_color chrome_part_red">红色块</div>
<div class="chrome_part_color chrome_part_yellow">黄色块</div>
<div class="chrome_part_color chrome_part_green">绿色块</div>
<div class="chrome_mask_color chrome_mask_red">红色遮罩</div>
<div class="chrome_mask_color chrome_mask_yellow">黄色遮罩</div>
<div class="chrome_mask_color chrome_mask_green">绿色遮罩</div>
<div class="chrome_part_color chrome_part_red2">红色补丁</div>
<div class="chrome_wrap">外围圆边</div>
<div class="chrome_heart_white">
<div class="chrome_heart">中心</div>
</div>
</div></div>
我们简单的将HTML写成这样:<div id="container"
<img id="logo" src="logo.png" alt="Lee Munroe" /</divCSS样式可能会是这个样子的:
body{background:#999}
#container{
width:960px
background:#fff
margin:20px auto
padding:10px}下面是一个效果预览：
设置为相对定位，当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：
#container{
width:960px
background:#fff
margin:20px auto
padding:10px
position:relative}将它定位到盒子的外面现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。#logo{position:absolute
