×
低端
思古
饭团
飘花
人人
爱迪
暮光
片吧
月亮
九零
茶杯狐
不求人
素白白
大师兄
追剧吧
村长爸
美剧虫
万影网
独播库
4K鸭
00后
BL解析
瓜皮TV
MK影视
真不卡
奈飞星
影客团
蛋蛋赞
NO视频
Auete
桔子TV
追剧达人
在线之家
两个BT
MaGeDN
YYDS
YYeTs
高清电台
豆瓣下载
爱奇艺
腾讯
优酷
`)
/*
*display属性不支持过渡，那么可以让其他可见的属性过渡，并与display值的变化分开执行
*使用定时器强制拆分成两步，实现透明过渡效果
*/
var box,btn,times;
box = document.querySelector(".box");
btn = document.querySelector(".magnifier1");
times = document.querySelector(".times");
btn.onclick = function () {
setTimeout(function() {
box.style.opacity = 1;
}, 0);
box.style.display = "block";
box.style.opacity = 0;
};
times.onclick = function () {
box.style.opacity = 0;
setTimeout(function () {
box.style.display = "none";
}, 1000);
};
//使用!important提高css优先级，这样就不会被原网页css覆盖
GM_addStyle(`
.box {
background-color: #268dcd;
text-align: center;
position: relative;
height: 265px;
width: 100%;
display: none;
opacity: 1;
transition: all 1s linear;
}
.list {
position: relative;
text-align: center;
color: #ff4041;
font-weight: 600;
font-size: 15px;
background-color: #9ad7e0;
padding: 2px 15px;
}
.btn {
position: relative;
height:20px;
width:65px;
padding-top: 3px;
border: none;
cursor: pointer;
outline: none;
overflow: hidden;
color: #fff;
font-weight: 700;
font-size: 15px;
background-color: #222;
margin: 5px 5px 5px 5px;
background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%) !important;
}
.btn span {
position: relative;
font-family:"宋体";
z-index: 1;
}
.btn:after {
content: "";
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 180%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.times{
position: absolute;
z-index: 999;
color: #ff4041;
font-size: 28px;
border: 1px solid #268dcd;
border-radius: 50%;
right: 10px;
width: 25px;
height: 25px;
line-height: 28px;
cursor: pointer;
background: #9ad7e0;
}
.times:hover{
color:#268dcd;
background:#00a1d6;
}
`)
}