新聞發(fā)布
管理系統(tǒng)昨天是愚人節(jié)，技術(shù)部的大神弄了個愚人節(jié)網(wǎng)頁特效代碼，大概的效果的是一個新的用戶第一次進入網(wǎng)站瀏覽，原網(wǎng)頁加載完畢后，頁面會漸漸變得模糊而且用戶不點擊的情況下不會有反應(yīng)，如果用戶點擊網(wǎng)頁任何一個地方，網(wǎng)頁會自動彈出一個層，層里面是放著一個愚人節(jié)的圖片素材，通過A標(biāo)簽提示，擦亮眼睛頁面回復(fù)到清晰狀態(tài)，效果如下
以下是網(wǎng)頁開發(fā)代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>愚人節(jié)快樂！</title>
<script src="https://lib.baomitu.com/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style type="text/css">
.disabled-events {
user-select: none;
pointer-events: none
}
.emitter-dot {
background-color: rgba(129, 59, 245, .8);
border-radius: 999px;
position: absolute
}
.fool-blur {
-webkit-animation: fool_blur ease-in 1.5s;
animation: fool_blur ease-in 1.5s;
animation-fill-mode: forwards
}
.fool-day {
display: none;
position: fixed;
z-index: 9999999;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.fool-day .pop-wrap {
position: fixed;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.fool-day .pop-wrap .content {
display: block;
width: 400px;
height: 400px;
animation-duration: 1s;
animation-delay: 0s;
background-repeat: no-repeat;
background-size: 400px 400px;
background-image: url("這里填寫你的關(guān)閉彈層的圖片.jpg");
box-shadow: 0 2px 20px rgba(129, 59, 245, .5);
border-radius: 12px;
overflow: hidden
}
.fool-day .pop-wrap .content img {
display: block;
width: 400px;
height: 400px
}
.fool-day .pop-wrap .content .action-wrap {
padding: 340px 0 0 0;
text-align: center;
font-size: 0
}
.fool-day .pop-wrap .content .action-wrap .btn {
display: inline-block;
min-width: 132px;
height: 32px;
text-align: center;
padding: 6px 24px;
font-weight: 600;
font-size: 14px;
margin: 0 auto;
cursor: pointer;
box-sizing: border-box;
vertical-align: middle;
user-select: none
}
.fool-day .pop-wrap .content .action-wrap .btn + .btn {
margin-left: 16px
}
.fool-day .pop-wrap .content .action-wrap .btn-basic {
border: 1px solid rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
border-radius: 16px
}
.fool-day .pop-wrap .content .action-wrap .btn-basic:hover {
box-shadow: 0 0 5px #7034d2
}
.fool-day .pop-wrap .content .action-wrap .btn-primary {
background-image: linear-gradient(-180deg, #fdb414 0, #fd930b 99%);
color: #fff;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.20);
border-radius: 16px
}
.fool-day .pop-wrap .content .action-wrap .btn-primary:hover {
background-image: linear-gradient(-180deg, #f5ae14 0, #f58f0b 99%)
}
@-webkit-keyframes fool_blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px)
}
100% {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px)
}
}
@keyframes fool_blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px)
}
100% {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px)
}
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%">
<div>這是一個測試用的愚人節(jié)頁面模糊效果！</div>
<div>
<div>
<div id="emitter">
<div>
<span class="btn btn-basic btn-close">給我好好顯示網(wǎng)頁！</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var fooldayCookieName = "foolday_randomStr";
$(document).ready(function () {
if (document.cookie.indexOf(fooldayCookieName + "=") == -1) {
$(".pusher").addClass("disabled-events");
setTimeout(function () {
$.fooldayExplode = new FooldayExplode(document.querySelector(".fool-day"));
$(".pusher").addClass("fool-blur");
setTimeout(function () {
$(document).on("mousedown touchstart", clickShowFoolDayModal)
}, 1500)
}, 1000)
}
});
function removeFoolDayEffect() {
$(".pusher").removeClass("disabled-events");
$.fooldayExplode.start();
$(".fool-day").fadeOut();
$(".pusher").removeClass("fool-blur")
}
var showFoolDayModal = function () {
$("body").append($(".fool-day"));
var b = $(".fool-day");
var a = b.find(".pop-wrap .content");
b.show();
a.addClass("zoomInDown animated");
$(".fool-day .btn-close").on("mousedown touchstart", clickRemoveFoolDay);
$(".fool-day .btn-hide").on("mousedown touchstart", clickHideFoolDay)
/*a.on("animationend", function () {
})*/
};
var clickShowFoolDayModal = function () {
showFoolDayModal();
$(document).off("mousedown touchstart", clickShowFoolDayModal)
};
var clickRemoveFoolDay = function () {
document.cookie = fooldayCookieName + "=1";
removeFoolDayEffect();
$(".fool-day .btn-close").off("mousedown touchstart", clickRemoveFoolDay)
};
var clickHideFoolDay = function () {
removeFoolDayEffect();
$(".fool-day .btn-hide").off("mousedown touchstart", clickHideFoolDay)
};
function FooldayExplode(a) {
var c = document.createElement("div"), e = 100, g = 50, f = 100, b = 10;
c.setAttribute("id", "emit-wrap");
c.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
document.body.appendChild(c);
function d(j) {
var l = new TimelineLite({
onComplete: function () {
$("#emit-wrap").remove()
}
}), p, o, k, n, m;
for (n = 0; n < g; n++) {
k = document.createElement("div");
k.className = "emitter-dot";
m = i(b, f);
j.appendChild(k);
p = Math.random() * Math.PI * 2;
o = Math.random() * (e / 2 - m / 2);
TweenLite.set(k, {
x: Math.cos(p) * o,
y: Math.sin(p) * o,
width: m,
height: m,
xPercent: -50,
yPercent: -50,
force3D: true
});
l.to(k, 1 + Math.random(), {opacity: 0, x: Math.cos(p) * o * 24, y: Math.sin(p) * o * 24}, 0);
l.duration(1.5)
}
return l
}
function h(k) {
var n = d(c);
var m = $(k).offset();
var l = $(k).width();
var j = $(k).height();
TweenLite.set(c, {x: m.left + l / 2, y: m.top + j / 2});
n.restart()
}
function i(k, j) {
return k + Math.random() * (j - k)
}
FooldayExplode.prototype.start = function () {
h(a)
}
};
</script>
</body>
</html>
