文章访客
dadadasdas的头像 - 腾飞博客
dadadasdas
储蓄卡的头像 - 腾飞博客
储蓄卡
一只自律鸭的头像 - 腾飞博客
一只自律鸭
详情
评论
问答

WordPress子比美化教程(持续更新中)

文章最后更新时间:2025-03-24 23:59:06

直接将下面的代码放到:子比主题–>>自定义CSS样式即可!

@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}
*{font-family: "lovely"}
图片[1] - WordPress子比美化教程(持续更新中)

将下面的代码放到:/wp-content/themes/zibll/footer.php</footer>标签后面即可

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

效果

腾飞博客致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!

将下面的代码放到你想显示的地方即可!

<p class="tengfei-print">腾飞博客致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!</p>

将下面的代码放到:自定义CSS样式即可!

<style>
.tengfei-print{
    width:1000px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: dy 5s steps(60, end) infinite;
    animation: dy 5s steps(50, end) infinite;
}
 
@-webkit-keyframes dy{
    from{
        width:0;
    }
}
@keyframes dy{
    from{
        width:0;
    }
}
</style>
图片[2] - WordPress子比美化教程(持续更新中)

将下面的代码放到:子比主题–>>自定义CSS样式即可!

::selection {
    background: transparent;
    color:#0045FF;
}
图片[3] - WordPress子比美化教程(持续更新中)

将下面的代码放到:子比主题–>>自定义CSS样式即可!

.navbar-top .sub-menu,.theme-popover{background:linear-gradient(135deg,#ffffffb0 35%,#ffffffb0 100%);backdrop-filter:saturate(5) blur(20px)}
图片[4] - WordPress子比美化教程(持续更新中)

放到:子比主题–>>自定义CSS样式即可!

.wp-posts-content img {border-radius: 15px;}

效果如下

我是腾飞博客

这个样式就是鼠标移动显示隐藏的文字,非常的实用,将下面的css放到:子比主题–>>自定义CSS样式即可,然后我们通过标签来实现隐藏文字,如下代码,记住代码里面的css代码是.wponss,那么我们的元素需要是class

.wponss {
    text-decoration: none;
    transition: filter 150ms ease-in-out;
    transition-delay: 500ms;
    filter: blur(4px);
        }
.wponss:hover {filter: blur(0);
transition-delay: 0ms;
        }
<p class="wponss">我是腾飞博客</p>

1 2

THE END
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容