为自己网站的添加个开屏动画

@zgcwkj  2018年02月08日

当然我这个是个案例,自己写的原创代码!

使用方法:(下面只提供压缩版)
1,在<title>标题</title>//网站的标题后面添加样式

压缩版:

<style>@keyframes zbks { from { left: 0; opacity: 1; } to { left: -1000px; opacity: 0; } } @keyframes rbks { from { right: 0; opacity: 1; } to { right: -1000px; opacity: 0; } } @keyframes yanshe { 0% { color: #D41FFF; text-shadow: 0 0 0 #000; } 20% { color: #A0A0A4; text-shadow: 2px 2px 2px #000; } 40% { color: #007F00; text-shadow: 4px 4px 4px #000; } 60% { color: #2A5F00; text-shadow: 6px 6px 6px #000; } 80% { color: #FF1F00; text-shadow: 3px 3px 3px #000; } 100% { color: #800000; text-shadow: 0px 0px 0px #000; } } #kp { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; } #kp #za { position: absolute; width: 50%; height: 100%; background: #000; float: left; } #kp #ra { position: absolute; margin-left: 50%; width: 50%; height: 100%; background: #000; float: left; } .zbks { animation: zbks 3s; } .rbks { animation: rbks 3s; } .spinner { display: block; width: 1px; height: 1px; border: 60px solid rgba(255, 255, 255, 0.20); border-radius: 60px; border-left-color: transparent; border-right-color: transparent; animation: spin 1s infinite; } @keyframes spin { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(720deg) scale(0.2); } }</style>

2,在<body>//网站的内容后面添加样式

压缩版:

<div id="kp"><div style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000" id="center"><center><canvas id="canvas"></canvas><span class="spinner"></span><h3>&nbsp;</h3><h1 style="color:#FF5;animation:yanshe 3s">正在加载页面...</h1></center></div><div><div id="za"></div><div id="ra"></div></div></div><script>setTimeout(function(){var e=document.getElementById("center");e.style.display="none";var t=document.getElementById("za"),n=document.getElementById("ra");t.className="zbks",n.className="rbks",setTimeout(function(){var e=document.getElementById("kp");e.style.display="none"},2e3)},1e3);</script>

3,至此,你已经完成了呢!快刷新看看是不是达到效果了



添加新评论

  1. coolapk前来mo bai

    回复
    1. @1111

      欢迎基安大佬前来参观!!!

      回复
Top