Ri pro主题美化:Logo流光效果

有部分网站我们可以看到它的logo是一闪一闪发光的,其实这并不是制作logo时加入的特效,而是直接调用了css来实现的流光特效。

美化教程

只需要将以下代码加入到RiPro主题设置->顶部设置-> 自定义CSS样式代码 中即可生效。

/*LOGO 流光*/
.logo-wrapper {
    position: relative;
    font-size:2em;
    font-weight:700;
    line-height:39px;
    overflow:hidden;
    margin:0;
}
.logo-wrapper::before{
    content:"";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
    0% { left: -90px; top: 0; }
    to { left: 90px; top: 0; }
}

人已赞赏
WordPress美化

RiPro主题美化:文章标题美化

2020-7-25 12:25:11

WordPress美化

Ri pro主题美化:用户头像旋转特效

2020-7-25 13:12:49

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索