隨筆-部落格園美化
阿新 • • 發佈:2020-12-21
豬寶店美化程式碼
背景調整
#頁面定製CSS程式碼中: body { color: #000000; background:url(https://w.wallhaven.cc/full/l3/wallhaven-l392mr.jpg) fixed; background-position:center; background-size:cover; background-repeat: no-repeat; font-family: "微軟雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 14px; min-height: 101%; opacity: 0.8; }
禁止右鍵複製
#頁面定製CSS程式碼:
html,body {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
新增背景人物
#部落格側邊欄公告: <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model": { jsonPath: "https://unpkg.com/[email protected]/assets/shizuku.model.json", "scale": 1 }, "display": { "position": "right", "width": 100, "height": 200, "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.9 }, "react": { "opacityDefault": 1.0, "opacityOnHover": 0.2} }); </script>
滑鼠點選效果
#頁首HTML程式碼 <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤可愛小寶❤","❤可愛大寶❤","❤豬寶店❤","❤❤❤","✰✰✰"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
粒子吸附效果
#頁尾HTML程式碼
<script id="c_n_script"
src="https://blog-static.cnblogs.com/files/xiaokang01/js.js"
color="240,230,140"
opacity="2.0"
count="200"
zindex="-5">if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
{
}
else
{ }
</script>
五角星墜落效果
#頁尾HTML程式碼
<script id="c_n_script"
<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('✰'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 5,
maxSize : 25,
newOn : 500,
flakeColor : getRandomColor() /* 此處可以定五角星顏色*/
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: getRandomColor()
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 10, /* 定義五角星最小尺寸 */
maxSize: 100,/* 定義五角星最大尺寸 */
newOn: 300 /* 定義密集程度,數字越小越密集 */
});
});
var getRandomColor = function(){
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
</script>