WordPress

在diy.css加入想要的特效代码,清除网站和本地浏览器缓存看效果。换主题注意备份。

也可以在后台头部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; }
}
 
 
/*头像旋转*/
.bg-cover {
    border: #ececec 1px solid;
}
.avatar{
-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;
}
.avatar:hover{
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
}
 
 
/**====滚动条样式====*/
::-webkit-scrollbar {/*滚动条整体样式*/
  width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

右键美化

在footer.php 前面插入

<!-- 修改鼠标右键 -->    
<style type="text/css">    
a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center    
center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px    
1px 3px rgba (0,0,0,.3);box-shadow:1px 1px 3px rgba(0,0,0,.3);position:absolute;display:none;z-index:10000;opacity:0.9;}    
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}    
div.usercm ul li{margin:0px;padding:0px;line-height:35px;border-bottom:1px    
solid #ccc;} div.usercm ul li a{color:#666;padding:0 15px;display:block}    
div.usercm ul li a:hover{color:#fff;background: linear-gradient(-125deg,#0295f9    
0%, #2f49fd 100%);} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed}    
a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff    
!important;}    
</style>    
<div class="usercm">    
<ul>    
<li>    
<a href="javascript:void(0);" onclick="getSelect();">    
<i class="fa fa-clipboard fa-fw">    
</i>    
<span>    
复制文字    
</span>    
</a>    
</li>    
<li>    
<a href="javascript:window.location.reload();">    
<i class="fa fa-refresh fa-fw">    
</i>    
<span>    
刷新页面    
</span>    
</a>    
</li>    
<li>    
<a href="javascript:history.go(1);">    
<i class="fa fa-arrow-right fa-fw">    
</i>    
<span>    
前进一页    
</span>    
</a>    
</li>    
<li>    
<a href="javascript:history.go(-1);">    
<i class="fa fa-arrow-left fa-fw">    
</i>    
<span>    
后退一页    
</span>    
</a>    
</li>    
<li>    
<a href="javascript:void(0);" onclick="baiduSearch();">    
<i class="fa fa-paw fa-fw">    
</i>    
<span>    
百度搜索    
</span>    
</a>    
</li>    
</ul>    
</div>    
<script type="text/javascript">    
(function(a) {    
a.extend({    
mouseMoveShow: function(b) {    
var d = 0,    
c = 0,    
h = 0,    
k = 0,    
e = 0,    
f = 0;    
a(window).mousemove(function(g) {    
d = a(window).width();    
c = a(window).height();    
h = g.clientX;    
k = g.clientY;    
e = g.pageX;    
f = g.pageY;    
h + a(b).width() >= d && (e = e - a(b).width() - 5);    
k + a(b).height() >= c && (f = f - a(b).height() - 5);    
a("html").on({    
contextmenu: function(c) {    
3 == c.which && a(b).css({    
left: e,    
top: f    
}).show()    
},    
click: function() {    
a(b).hide()    
}    
})    
})    
},    
disabledContextMenu: function() {    
window.oncontextmenu = function() {    
return ! 1    
}    
}    
})    
})(jQuery);    
function getSelect() {    
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? alert("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")    
}    
function baiduSearch() {    
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;    
"" == a ? alert("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)    
}    
function googleSearch() {    
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;    
"" == a ? alert("啊噢...你没还没选择文字呢!") : window.open("https://www.google.com/search?q=" + a)    
}    
function localSearch() {    
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;    
"" == a ? alert("啊噢...你没还没选择文字呢!") : window.open("search.php?q=" + a)    
}    
$(function() {    
for (var a = navigator.userAgent,    
b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {    
d = !1;    
break    
}    
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())    
});    
</script>

底部波浪

在footer.php 前面插入

<div class="waveHorizontals mobile-hide">    
<div id="waveHorizontal1" class="waveHorizontal"></div>    
<div id="waveHorizontal2" class="waveHorizontal"></div>    
<div id="waveHorizontal3" class="waveHorizontal"></div>    
</div>

在diy.css加入

/* 底部波浪 */
.waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  background-color:#fff !important
}
.ripro-dark .waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  background-color:#181616 !important
}
#waveHorizontal1 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    animation-delay: -2s;
    animation-duration: 12s;
}
#waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
    background-image: linear-gradient(20deg,#fde300 0,#ffd001 100%)!important;
}
.ripro-dark #waveHorizontal1{
    background-color: #f1f1f1!important;
}
.ripro-dark  #waveHorizontal2{
    background-color: #f1f1f1!important;
}
.ripro-dark  #waveHorizontal3{
    background-color: #f1f1f1!important;
}
.waveHorizontal {
    width: 200%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 350px 100%;
    transform-origin: 0 100% 0;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}

#waveHorizontal2 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}
#waveHorizontal3 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    animation-delay: -1s;
    animation-duration: 3s;
}

最好把001.svg 002.svg 003.svg下载保存到自己网站,(20deg,#fde300 0,#ffd001 100%)修改波浪颜色。

评论

This is just a placeholder img.