说明:
在网上看到知更鸟博客logo都有光一闪一闪的效果,刹是惹人喜欢,于是在网上看了下产生扫光效果的原因,原来是通过css代码实现,于是自己看着别人的博客自己鼓捣了下,于是也给自己的logo加了扫光效果。
教程:
将下面这段代码添加到主题的样式表的结尾,对于大多数主题来说为style.css文件;
/**logo扫光效果CSS 开始**/ #header .logo{position:relative;float:left;margin-right:20px;padding:15px 0;overflow: hidden;} #header .logo a:before{ content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-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 infinite; animation: searchLights 1s ease-in 1s infinite; } @-webkit-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-o-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-moz-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } /**logo扫光效果CSS 结束**/
参数配置
#header .logo根据每个网站style.css而定,可能为.logo、#logo等,可参考自己网站的css文件配置。
#header .logo a:before一般网站logo都带有A标签跳转,所以在此设置a:before的CSS,即在A标签生效前执行该段CSS。
overflow: hidden这个代码非常重要,可以限制扫光效果在logo所占的范围内,避免扫光效果溢出,影响美观。
@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的 logo 的大小和布局进行调整即可(按F12可以修改参数自行调试)。
保存后去看看效果。
发表评论