<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>诛邪退避 百事无忌!!</title>
<meta name="keywords" content="积极向上 能量满满" />
<style type="text/css">
* { margin: 0; padding: 0 }
.ops-blackhole{
width: 250px;
height: 250px;
animation-fill-mode: forwards;
animation-timing-function:cubic-bezier(0,0,0,0);
position: fixed;
overflow: hidden;
}
@keyframes mymove{ /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0%{
transform: scale(1) rotateZ(0deg); /*开始为原始大小*/
}
70%{
transform: scale(10) rotateZ(180deg);
}
100%{
transform: scale(0) rotateZ(360deg);
}
}
#hd2{
width: 200px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
}
.changing {
animation: rightMove 4s;
}
</style>
</head>
<body>
<style type="text/css">
* { margin: 0; padding: 0 }
header{
width: 100%;
background-color: black;
height: 70px;
border-bottom: rgba(0, 0, 0, 0.22) 1px solid;
}
#nav{
margin: 0 auto;
width: 1000px;
text-align: center;
padding-top: 15px;
}
#nav ul li{
line-height: 40px;
display: inline;
}
#nav ul li a{
color: rgba(255, 112, 87, 0.73);
font-size: 17px;
font-weight: bold;
text-decoration: none;
display: block;
padding: 0 20px;
margin-right: 10px;
float: left;
}
#nav ul li a:hover,#nav_current{
color: rgba(255, 129, 99, 0.91);
background: rgb(5, 2, 2);
box-shadow: 0px 1px 0px rgb(189, 226, 0), inset 0px 1px 1px rgb(202, 239, 0);
border-radius: 15px; }
</style>
<header style='position:fixed'>
<nav id="nav">
<ul>
<li>
<a href="/" id="nav_current">赞赞首页</a></li>
<li>
<a href="/" target="_blank" title="赞赞联盟">赞赞联盟</a></li>
<li>
<a href="/" target="_blank" title="赞赞热点">赞赞热点</a></li>
<li>
<a href="/" target="_blank" title="赞赞推荐">赞赞推荐</a></li>
<li>
<a href="/" target="_blank" title="花里胡哨">花里胡哨</a></li>
<li>
<a href="/" target="_blank" title="个人主页">个人主页</a></li>
<li>
<a href="/" target="_blank" title="模块待开发">模块待开发..</a></li>
</ul>
<!--获取当前页导航 高亮显示标题--></nav>
</header>
<style type="text/css">
.xz li{
line-height: 40px;
display: inline;
}
</style>
<div>
<div style='width:100%;height:75px' value='填充div'></div>
<div style='text-align:content'>
<div style='width:1000px;margin:0 auto;'>
<textarea name='selfzanzan' style="margin-left:5px;font-size:20px; width:650px;height:120px;resize: none;" maxlength="500"></textarea>
<div style='display:inline-block;height:120px'>
<ul class='xz' style='position:absolute;width:300px;'>
<li>
<input type='button' class='runButton' value='诛邪退避' style='height:120px'>
</li>
<li>
<input type='button' class='box' value='放下屠刀' style='position:absolute;left:65px;top:0px;height:120px;z-index:9999;'>
</li>
<li>
<input type='button' class='box1' value='辗转反侧' style='position:absolute;left:130px;top:0px;height:120px;z-index:9999;'>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 隐藏层 -->
<div style='width:100%;background-color:#afafbd'>
<div>
<div>
<img id='hd' src="blackhole2019_pc.png" class="ops-blackhole" style='display:none'>
</div>
</div>
</div>
<script>
// onclick='myFunction()'
var x = document.getElementById("hd");
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 5s"; // Chrome, Safari 和 Opera 代码
x.style.display = 'block';
//可视区的宽/高(DOM)
//offsetHeight（带边框）和clientHeight（不带边框）
var he = document.documentElement.clientHeight;
var wi = document.documentElement.clientWidth;
x.style.left = String(wi / 2 -100) + 'px'
x.style.top = String(he / 2 - 100) + 'px'
}
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationend", myEndFunction);
function myEndFunction() {
this.style.display = 'none';
}
document.querySelector(".runButton").addEventListener("click", play, false);
function play() {
myFunction();
document.querySelector(".box").className = "box";
document.querySelector(".box1").className = "box1";
var he = document.documentElement.clientHeight;
var wi = document.documentElement.clientWidth;
var style = document.styleSheets[0];
console.log(he,wi)
style.insertRule('@keyframes rightMove{100% {animation-timing-function: linear;transform: scale(0);position:absolute;top:350px;left:-300px;}}');
window.requestAnimationFrame(function(time) {
window.requestAnimationFrame(function(time) {
document.querySelector(".box").className = "box changing";
document.querySelector(".box1").className = "box1 changing";
});
});
}
</script>
<div style='width:100%;height:1200px;background-color:rgba(1,22,11,22)'>
</div>
<div>
</div>
</body>
</html>
百度的图片是png的!!! GIF 展示 有点失帧!
blackhole2019_pc.png
u46y6-8viok.gif
