折腾日记-B2一些小改动美化记录

1.给B2 网站logo添加闪光效果

演示看本站LOGO

使用方法

放在你主题的style.css内或子主题的style.css内,尺寸和速度自己调整一下。

如果出现溢出,那说明你尺寸没调整好。logo和这个光效的尺寸都要调整,改改你就大概知道要动哪里了。

<div class="logo">
<img src="https://laogoua.com/logo.png">
</div>
<style>
.logo img {
height:55px;
width:auto;
}
.logo{
height: 55px;
position: relative;
overflow: hidden;
float:left;
max-height: 55px;
}
.logo:before {
content: "";
position: absolute;
width: 150px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: blink 2s ease-in 2s infinite;
animation: blink 1.5s ease-in 1.5s infinite;
}
@-webkit-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-o-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@keyframes blink {
from {left: -100px;top: 0;}
to {left: 320px;top: 0;}
}
</style>

2.底部添加彩色波浪

演示:

在B2主题目录下,footer.php文件中的166行下面添加下面的代码:

<!--底部波浪开始-->
<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="#D200D2"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#921AFF"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#FF2D2D"/>
</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>
<!--底部波浪结束-->

3.⎛⎝⎠⎞网站页脚小耳朵

演示:

在主题根目录style.cc文件加上代码即可:

.copyright a:before{
content: '⎛⎝';
left: 2px;
}
.copyright a:after{
content: '⎠⎞';
right: 2px;
}

4.更改鼠标样式

在子主题style.cc中加入以下代码:

1.cur是鼠标样式额图片,可以自己找,也可以使用我的

</style>
/*自定义鼠标*/
<style>
/** 普通指针样式**/
body{cursor: url(https://laogoua.com/js1/7.cur), default;}
/** 经过链接指针样式**/
a:hover{cursor:url(https://laogoua.com/js1/8.cur), pointer;}
</style>

除非注明,否则均为老狗博客原创文章,转载必须以链接形式标明本文链接

本文链接:https://laogoua.com/858.html

折腾日记

折腾日记-CentOS 7下升级sqlite3到最新版本踩坑记录

2021-6-26 16:39:04

WordPress教程Wordpress相关

WordPress主题安装的两个方法

2021-11-18 15:18:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧