文章最后更新时间:
直接将下面的代码放到:子比主题–>>自定义CSS样式即可!
@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}
*{font-family: "lovely"}
![图片[1] - WordPress子比美化教程(持续更新中)](https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01TnDW3i1QbInHjG9H1_!!2210123621994.jpg)
将下面的代码放到:/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子比美化教程(持续更新中)](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN011KEe2r1QbInJpsIUk_!!2210123621994.gif)
将下面的代码放到:子比主题–>>自定义CSS样式即可!
::selection {
background: transparent;
color:#0045FF;
}
![图片[3] - WordPress子比美化教程(持续更新中)](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN014oiYQE1QbInM0ooqA_!!2210123621994.jpg)
将下面的代码放到:子比主题–>>自定义CSS样式即可!
.navbar-top .sub-menu,.theme-popover{background:linear-gradient(135deg,#ffffffb0 35%,#ffffffb0 100%);backdrop-filter:saturate(5) blur(20px)}
![图片[4] - WordPress子比美化教程(持续更新中)](https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01u2T3YV1QbInKNV9w3_!!2210123621994.jpg)
放到:子比主题–>>自定义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
暂无评论内容