动态光效增强视觉吸引力
Logo扫光通过模拟光线扫过的动态效果，赋予静态Logo更强的视觉冲击力。其核心在于利用渐变透明遮罩层叠加在Logo上，通过位移动画实现光效从左到右（或特定方向）的流动感。这种动态效果能迅速吸引用户注意力，符合Logo设计中“识别性”和“视觉冲击力”的要求。
目录 
- 创建css文件
- 复制css代码
- 引入css
创建css文件
创建一个名为： joe.logo.sao .min.css的文件，min这里代表的是压缩后的css代码，当然我给出的也是压缩好的，可以直接使用的。
复制css代码
.joe_header__above-logo{overflow:hidden;display:block}.joe_header__above-logo:before{content:"";position:absolute;top:-50px;left:-15px;width:250px;height:12px;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:flashlights 1s ease-in 1s infinite;-o-animation:flashlights 1s ease-in 1s infinite;animation:flashlights 1.5s ease-in 1s infinite}@-webkit-keyframes flashlights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes flashlights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes flashlights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes flashlights{0%{left:-100px;top:0}to{left:120px;top:100px}}复制以上css代码粘贴到我们创建好的文件里面，保存后我们进行下一步操作。
引入css
我们使用 <link rel="stylesheet" href="/usr/themes/Joe/assets/css/joe.logo.sao.min.css"> 方式在joe主题后台里面全局设置： <head></head>部分把引入链接填进去然后就成功了。
总结
要完成logo扫光这个功能，需要joe主题的类名没被改过，改过的话自己替换代码中的类名即可，剩下的就是在服务器端创建一个后缀为css的文件，把代码粘贴进去保存好之后到head头部引入就行。
评论