功能介绍

如果您正在使用日主题系列,这是非常简单的,进入后台-外观-自定义-额外CSS,然后添加以下代码 ,如果您要用与其他主题也是可以的,只不过是有点麻烦而已,首先需要找到你使用的主题中的样式文件,再使用F12控制台选择logo查看一下对应的Class。

效果展示

白天黑夜

日主题系列添加Logo扫光效果插图

日主题系列添加Logo扫光效果插图1

美化代码

  1. /**logo扫光日间**/
  2. .logowrapper:after {
  3. content: “”;
  4. position: absolute;
  5. width: 150px;
  6. height: 10px;
  7. backgroundcolor: rgba(255,255,255,.5);
  8. webkittransform: rotate(-45deg);
  9. transform: rotate(-45deg);
  10. webkitanimation: blink 1s easein 1s infinite;
  11. animation: blink 1s easein 1s infinite;
  12. }
  13. /**logo扫光夜间**/
  14. .darkopen .logowrapper:after {
  15. content: “”;
  16. position: absolute;
  17. width: 150px;
  18. height: 10px;
  19. backgroundcolor: rgba(41,48,66,1);
  20. webkittransform: rotate(-45deg);
  21. transform: rotate(-45deg);
  22. webkitanimation: blink 1s easein 1s infinite;
  23. animation: blink 1s easein 1s infinite;
  24. }
  25.  
  26. @-webkitkeyframes blink {
  27. from {left: 10px;top: 0;}
  28. to {left: 320px;top: 0;}
  29. }
  30. @-okeyframes blink {
  31. from {left: 10px;top: 0;}
  32. to {left: 320px;top: 0;}
  33. }
  34. @-mozkeyframes blink {
  35. from {left: 10px;top: 0;}
  36. to {left: 320px;top: 0;}
  37. }
  38. @keyframes blink {
  39. from {left: 100px;top: 0;}
  40. to {left: 320px;top: 0;}
  41. }

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注