wordpress美化:利用before选择器给网站Logo添加扫光特效

云墨
云墨
云墨
643
文章
11
评论
2018年8月30日 评论 539

wordpress美化:利用before选择器给网站Logo添加扫光特效

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

Logo扫光方法

方法很简单,只需要添加一段css代码即可,如果你是WordPress程序,那么请在当前主题css文件最下方添加如下代码,需注意:代码中的#logo:before,根据自己的实际情况修改为当前主题的Logo元素选择器名称。

  1. /**logo扫光效果CSS**/
  2. #logo:before{
  3.     content:"";
  4.     position: absolute;
  5.     left: -665px;
  6.     top: -460px;
  7.     width: 200px;
  8.     height: 15px;
  9.     background-color: rgba(255,255,255,.5);
  10.     -webkit-transform: rotate(-45deg);
  11.     -moz-transform: rotate(-45deg);
  12.     -ms-transform: rotate(-45deg);
  13.     -o-transform: rotate(-45deg);
  14.     transform: rotate(-45deg);
  15.     -webkit-animation: searchLights 1s ease-in 1s infinite;
  16.     -o-animation: searchLights 1s ease-in 1s infinite;
  17.     animation: searchLights 1s ease-in 1s infinite;
  18. }
  19. @-webkit-keyframes searchLights {
  20.     0% { left: -100px; top: 0; }
  21.     to { left: 120px; top: 100px; }
  22. }
  23. @-o-keyframes searchLights {
  24.     0% { left: -100px; top: 0; }
  25.     to { left: 120px; top: 100px; }
  26. }
  27. @-moz-keyframes searchLights {
  28.     0% { left: -100px; top: 0; }
  29.     to { left: 120px; top: 100px; }
  30. }
  31. @keyframes searchLights {
  32.     0% { left: -100px; top: 0; }
  33.     to { left: 120px; top: 100px; }
  34. }

当然,此效果也适用于其他建站程序,其仅仅是一个CSS效果而已。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin
云墨
  • 本文由 发表于 2018年8月30日
  • 转载请务必保留本文链接:https://www.yunmoseo.com/1488.html
WordPress回复评论自动添加@评论者的修改方法 网站建设

WordPress回复评论自动添加@评论者的修改方法

有网友留言,问我这个@昵称回复如何实现的?如下图: 其实之前我也看到很多博客有这样的功能,但是我是在后台审核并回复评论的,之前有好几次因为没注意评论信息栏的:回复给***,还以为是给我的留言,所以给人...
匿名

发表评论

匿名网友