WordPress主题网站logo添加扫光效果教程

好多网站主题LOGO带有一闪一闪的效果是不是很喜欢比如

WordPress主题网站logo添加扫光效果教程

于是在网上看了下产生扫光效果的原因,原来是通过css代码实现,

于是自己看着别人的博客自己鼓捣了下,于是也给自己的logo加了扫光效果。

 

教程开始:

 

将下面这段代码添加到主题的样式表的结尾,对于大多数主题来说为style.css文件;

/**logo扫光效果CSS 开始**/.logoimg {
/**根据logo外div样式名称修改名称,如果是ripro 请修改成 .logo-wrapper**/
position: relative;
overflow: hidden;
float: left;
max-height90px;
}
.logoimg:before {
/**根据logo外div样式名称修改before前名称,如果是ripro 请修改成 .logo-wrapper**/
content“”;
position: absolute;
width180px;
height10px;
/**光标的宽度,可根据实际调整**/
background-color: rgba(2552552550.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: blink 1s ease-in 1s infinite;
animation: blink 1s ease-in 1s infinite;
/**第一个数字参数控制扫光速度,数字越大越慢**/
}
@-webkit-keyframes blink {
from {
left10px;
top0;
}
to {
left320px;
top0;
}
}
@-o-keyframes blink {
from {
left10px;
top0;
}
to {
left320px;
top0;
}
}
@-moz-keyframes blink {
from {
left10px;
top0;
}
to {
left320px;
top0;
}
}
@keyframes blink {
from {
left-100px;
top0;
}
to {
left320px;
top0;
}
} /**logo扫光效果CSS 结束**/

保存后去看看效果。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!innuc@foxmail.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

i精品主题 WordPress教程 WordPress主题网站logo添加扫光效果教程 https://www.ijpzt.com/1549.html

IJPZT

有个性 不签名

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章

WordPress主题网站logo添加扫光效果教程-海报

分享本文封面