HTML实现网站欢迎页过渡

演示

一秒后直达主界面

css

html, body {background: radial-gradient(#181818, #000000);margin: 0;padding: 0;border: 0;-ms-overflow-style: none;}::-webkit-scrollbar {width: 0.5em;height: 0.5em;background-color: #c7c7c7;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #181818;}/*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb {border-radius: 3px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #c7c7c7;}/*欢迎页*/:root {--gold: #ffb338;--light-shadow: #77571d;--dark-shadow: #3e2904;}.wrapper {background: radial-gradient(#181818, #000000);display: grid;grid-template-areas: 'overlap';place-content: center;text-transform: uppercase;height: 100vh;}.wrapper > div {/*background-clip: revert;*/-webkit-background-clip: text;color: #363833;font-family: 'Poppins', sans-serif;font-weight: 900;font-size: clamp(3em, 18vw, 15rem);grid-area: overlap;letter-spacing: 1px;-webkit-text-stroke: 4px transparent;}div.bg {background-image: repeating-linear-gradient(105deg,var(--gold) 0%,var(--dark-shadow) 5%,var(--gold) 12%);color: transparent;filter: drop-shadow(5px 15px 15px black);transform: scaleY(1.05);transform-origin: top;}div.fg {background-image: repeating-linear-gradient(5deg,var(--gold) 0%,var(--light-shadow) 23%,var(--gold) 31%);color: #1e2127;transform: scale(1);}/* 淡出 */.wrapper {opacity: 1;/* 动画时间随意调整 */transition: all 0.5s;}.wrapper.fade-out {opacity: 0;}/* 淡入 */#interface {opacity: 0;/* 动画时间随意调整 */transition: all 0.7s;}#interface.fade-in {opacity: 1;}

body

<!--欢迎页 οnclick="bannerDisplay();"-->
<div class="wrapper" id="banner"style="-moz-user-select: none; -khtml-user-select: none; user-select: none;"><div class="bg" id="bg"></div><div class="fg" id="fg"></div><span id="bannerTitle" style="text-align: right;color: #c7c7c7;font-weight: bold;font-size: 1em"></span>
</div><!--底部版权信息-->
<div style="position: fixed; bottom: 10px;width: 100%;text-align: center;-moz-user-select: none; -khtml-user-select: none; user-select: none;"><span style="color: #666666;font-size:0.5em"> &copy; All rights reserved by<a href="javascript:void(0)" onclick="authors()" style="color: #0082ff;text-decoration: none;"title="查看作者">微信号：onlyoneshun</a></span>
</div>

script

window.onload = function () {document.getElementById("bg").innerText = "<・)))><<";document.getElementById("fg").innerText = "<・)))><<";document.getElementById("bannerTitle").innerText = "加载中......";<!--欢迎页-->// 淡出效果function myfun() {let banner = document.getElementById("banner")let interface = document.getElementById("interface");banner.classList.add("fade-out")interface.classList.add("fade-in")setTimeout(() => {banner.style.display = "none";interface.style.display = "block";}, 700);}timeout = setTimeout(myfun, 800);}

完整HTML

<html xmlns="http://www.w3.org/1999/html">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title><・)))><<</title><link rel="shortcut icon" href="favicon.ico"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1"><META HTTP-EQUIV="pragma" content="no-cache"><META HTTP-EQUIV="Cache-Control" content="no-cache, must-revalidate"><META HTTP-EQUIV="expires" content="0"><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;900&display=swap" rel="stylesheet"></head>
<style>html, body {background: radial-gradient(#181818, #000000);margin: 0;padding: 0;border: 0;-ms-overflow-style: none;}::-webkit-scrollbar {width: 0.5em;height: 0.5em;background-color: #c7c7c7;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #181818;}/*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb {border-radius: 3px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #c7c7c7;}/*欢迎页*/:root {--gold: #ffb338;--light-shadow: #77571d;--dark-shadow: #3e2904;}.wrapper {background: radial-gradient(#181818, #000000);display: grid;grid-template-areas: 'overlap';place-content: center;text-transform: uppercase;height: 100vh;}.wrapper > div {/*background-clip: revert;*/-webkit-background-clip: text;color: #363833;font-family: 'Poppins', sans-serif;font-weight: 900;font-size: clamp(3em, 18vw, 15rem);grid-area: overlap;letter-spacing: 1px;-webkit-text-stroke: 4px transparent;}div.bg {background-image: repeating-linear-gradient(105deg,var(--gold) 0%,var(--dark-shadow) 5%,var(--gold) 12%);color: transparent;filter: drop-shadow(5px 15px 15px black);transform: scaleY(1.05);transform-origin: top;}div.fg {background-image: repeating-linear-gradient(5deg,var(--gold) 0%,var(--light-shadow) 23%,var(--gold) 31%);color: #1e2127;transform: scale(1);}/* 淡出 */.wrapper {opacity: 1;/* 动画时间随意调整 */transition: all 0.5s;}.wrapper.fade-out {opacity: 0;}/* 淡入 */#interface {opacity: 0;/* 动画时间随意调整 */transition: all 0.7s;}#interface.fade-in {opacity: 1;}
</style>
<body>
<!--欢迎页 οnclick="bannerDisplay();"-->
<div class="wrapper" id="banner"style="-moz-user-select: none; -khtml-user-select: none; user-select: none;"><div class="bg" id="bg"></div><div class="fg" id="fg"></div><span id="bannerTitle" style="text-align: right;color: #c7c7c7;font-weight: bold;font-size: 1em"></span>
</div><!--底部版权信息-->
<div style="position: fixed; bottom: 10px;width: 100%;text-align: center;-moz-user-select: none; -khtml-user-select: none; user-select: none;"><span style="color: #666666;font-size:0.5em"> &copy; All rights reserved by<a href="javascript:void(0)" onclick="authors()" style="color: #0082ff;text-decoration: none;"title="查看作者">微信号：onlyoneshun</a></span>
</div>
<script>window.onload = function () {document.getElementById("bg").innerText = "<・)))><<";document.getElementById("fg").innerText = "<・)))><<";document.getElementById("bannerTitle").innerText = "加载中......";<!--欢迎页-->// 淡出效果function myfun() {let banner = document.getElementById("banner")let interface = document.getElementById("interface");banner.classList.add("fade-out")interface.classList.add("fade-in")setTimeout(() => {banner.style.display = "none";interface.style.display = "block";}, 700);}timeout = setTimeout(myfun, 800);}
</script>
</body>
</html>

HTML实现网站欢迎页过渡相关推荐

网站升级改版服务器,网站程序升级改版让网站无损失过渡
当现有的网站遇到数据容量瓶颈,需要更换网站程序,如将自己编写的网站管理系统更换为开源的CMS;旧版ASP数据库不能支持大容量的数据,需要转换为SQL.更换带来的数据丢失和用户体验等麻烦就接连不断,特别 ...
网络推广公司浅析网站栏目页该如何优化？
在网站优化时,网络推广公司认为网站的栏目页也是非常需要优化的,因为网站栏目页是根据网站关键词和网站主题将网站的内容从新建立起的一个新页面,给用户提供更多有价值的信息,那么网站的栏目页该如何进行优化呢? ...
珠海网络推广浅析网站内页排名怎么提升？
在网站优化中,珠海网络推广很多客户都是做网站单页面排名的,这样可以帮助网站提升整体的权重和排名,让网站的每一页都具备实力,那么到底该如何优化网站的内页排名呢?下面珠海网络推广就带大家一起来了解一下. ...
网站内页权重高于首页的原因及解决方法攻略总结！
网站内页权重高于首页的现象一般为:相同关键词排名内也会高于首页.内页面用户点击流量高于主页,这两大方面.出现这种情况时,也让优化人员有点摸不着头脑,甚至很无奈,那么,想要彻底解决该问题,就要先找到造成 ...
网站栏目页要如何进行优化呢？
一个网站想要运行的更畅通,更具有结构感就需要网站具备更清晰的导航条.有导航必定就要有栏目页,但在网站优化中,网站栏目页优化并不简单,因为它关乎着网站的整体优化效果,那么接下来,就带大家一起来了解一下网 ...
7怎样设置禁网_怎样才能提升网站内页的收录？
1.提高网站的内容质量,文章尽可能的原创.搜索引擎蜘蛛更喜爱原创的高质量内容,能够缩短网站的审核期. 2.良好的网站结构,继续搜索引擎的匍匐与抓取.现在一般都是div+css的结构,不要运用table ...
个人企业作品网站导航页源码
简介: 个人企业作品网站导航页源码网盘下载地址: http://kekewl.org/dMWhxRec9Ny0 图片:
html漂亮的表格模板+背景_教育与课程主题响应式网站着陆页模板
哈喽!大家好,这里公众号,Adobe素材助手. 教育与课程主题响应式网站着陆页模板.它是一个干净.现代和创造性的设计适合所有类型的教育风格的网站.这个教育网站模板是创造性和专业性的完美结合,所有部分都 ...
jstl处理栏目与子栏目_深圳北易：网站SEO优化如何提高网站栏目页排名
如今越来越多的企业都有网站,做优化的网站也越来越多,但是在搜索引擎被收录的网站就只有首页,其实可以让网站的每个页面(首页.栏目页.内容页.产品页)都被收录.只要每个月页面都设置相应的关键词,网站的整体 ...

HTML实现网站欢迎页过渡

演示

css

body

script

完整HTML

HTML实现网站欢迎页过渡相关推荐

最新文章

热门文章