HTML实现网站欢迎页过渡

news2024/9/29 23:25:44

演示

在这里插入图片描述
一秒后直达主界面

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/149999.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

c++11 标准模板（STL）（std::forward_list）（二）

c++11 标准模板（STL）（std::forward_list）（二）

定义于头文件 <forward_list> template< class T, class Allocator std::allocator<T> > class forward_list;(1)(C11 起)namespace pmr { template <class T> using forward_list std::forward_list<T, std::pmr::polymorphic_…
阅读更多...
什么是数字孪生城市

什么是数字孪生城市

数字孪生城市理念自提出以来不断升温&#xff0c;已成为新型智慧城市建设的热点&#xff0c;受到政府和产业 界的高度关注和认同。 什么是数字孪生城市 北京智汇云舟科技有限公司成立于2012年&#xff0c;专注于创新性的“视频孪生&#xff08;实时实景数字孪生&#xff09;”…
阅读更多...
【Java编程进阶】Java抽象类与接口详解

【Java编程进阶】Java抽象类与接口详解

推荐学习专栏&#xff1a;Java 编程进阶之路【从入门到精通】&#xff0c;从入门到就业精通&#xff0c;买不了吃亏&#xff0c;买不了上当&#xff01;&#xff01; 文章目录1. 抽象类2.接口3. 抽象类和接口对比4. 总结Java基础教程系列文章1. 抽象类 前面说到&#xff0c;Ja…
阅读更多...
【营销获客三】信贷细分客群研究——小微企业主

【营销获客三】信贷细分客群研究——小微企业主

【营销获客三】信贷细分客群研究——小微企业主一、小微企业主客群综述1.1 小微企业主定义与体量1.2 小微企业主信贷需求规模1.3 小微企业主的发展历史1.4 小微企业主不同阶段的痛点问题二、小微企业主整体客群特征2.1 客群特征概述2.2 基本属性特征2.3 经营情况特征2.4 融资借…
阅读更多...
RTL8380M/RTL8382M管理型交换机系统软件操作指南五：ACL/访问控制列表

RTL8380M/RTL8382M管理型交换机系统软件操作指南五：ACL/访问控制列表

接下来将对ACL进行详细的描述&#xff0c;主要包括以下四个方面内容&#xff1a;ACL概述、工作原理、ACL组设置、ACL规则 1.1 ACL概述 访问控制列表&#xff08;Access Control List&#xff0c;ACL&#xff09; 是路由器和交换机接口的指令列表&#xff0c;用来控制端口进出的…
阅读更多...
自连接讲解

自连接讲解

什么是自连接&#xff1f; 自连接可以理解为自己连接自己&#xff0c;在一张表上面所进行的操作&#xff1b;将一张表分成两张结构和数据完全一样的表&#xff0c;相当于克隆了一张跟自己长得一模一样的表&#xff1b; 但是既然是两张一模一样的表&#xff0c;数据库怎么去区分…
阅读更多...
[ 数据结构 ] 汉诺塔--------分治算法最佳实践

[ 数据结构 ] 汉诺塔--------分治算法最佳实践

0 分治算法 分治法:是一种很重要的算法。字面上的解释是“分而治之”&#xff0c;就是把一个复杂的问题分成两个或更多的相同或相似的子问题&#xff0c;再把子问题分成更小的子问题……直到最后子问题可以简单的直接求解&#xff0c;原问题的解即子问题的解的合并。经典问题:…
阅读更多...
什么你还不知道？快来看看我的年度总结吧

什么你还不知道？快来看看我的年度总结吧

作者介绍&#xff1a;阿玥的小东东 作者职位&#xff1a;后端、python、正在学习c 主页&#xff1a;阿玥的小东东 现在呢&#xff0c;人们都在写自己的年度总结&#xff0c;我也来凑个热闹吧&#xff01; 其实我来CSDN这个平台时间不算久&#xff0c;从2022年11月15号开始&…
阅读更多...
＜C++＞set和map

＜C++＞set和map

文章目录1. 关联式容器2. 键值对3. 树形结构的关联式容器4. set4.1 set的介绍4.2 set的使用4.2.1 set的模板参数4.2.2 set的构造4.2.3 set的迭代器4.2.4 set的容量4.2.5 set修改操作4.2.6 set的使用举例5. multiset5.1 multiset的介绍5.2 multiset的使用6. map6.1 map的介绍6.2…
阅读更多...
字符串相关类

字符串相关类

文章目录一、String类String的介绍String实例化面试题&#xff1a;String snew String("abc")创建对象&#xff0c;在内存中创建了几个对象&#xff1f;易错题1易错题2String常用方法String与char[ ]之间的转换String与byte[ ]之间的转换二、StringBuffer类、StringB…
阅读更多...
如何将NACOS作为配置中心

如何将NACOS作为配置中心

新建一个命名空间 点击创建配置 关键点1&#xff1a;Data ID的命名规则&#xff1a; 前面我们演示了在 nacos 控制台新建一个 DataID 为 cloud-producer-server-dev.yaml 的数据集&#xff0c;那么这个 Data ID 是什么呢&#xff1f;Data ID 是配置集的唯一标识&#xff0c;一个…
阅读更多...
CSS初级教程(字体)【第七天】

CSS初级教程(字体)【第七天】

文章目录【1】CSS 字体【2】CSS 字体样式【3】CSS 字体大小【4】CSS 谷歌字体【5】CSS 字体属性【6】所有 CSS 字体属性CSS上回学习链接 CSS初级教程 颜色【第一天】 CSS初级教程 背景【第二天】 CSS初级教程 边框【第三天】 CSS初级教程 边距、高度、宽度【第四天】 CSS初级教…
阅读更多...
ChatGPT的注册和使用教程

ChatGPT的注册和使用教程

1 简介在时下热门话题AI作画之外&#xff0c;最近一个名叫ChatGPT的聊天机器人又掀起了一股人工智能的热潮。已有无数人投入到对它的测试研究之中&#xff0c;想探清它到底无所不能到何种地步。据悉&#xff0c;已有超过百万人与机器人聊天&#xff0c;甚至导致网站一度崩溃。那…
阅读更多...
URDF与RVIZ

URDF与RVIZ

#来自赵虚左的资料&#xff0c;视频 创建功能包urdf01_rviz&#xff0c;依赖rviz xacro(比较简单使用) <launch> <!-- 设置参数 --> <param name"robot_description" textfile"$(find urdf01_rviz)/urdf/urdf/demo01_helloworld.urdf"…
阅读更多...
Docker软件安装文档

Docker软件安装文档

软件安装文档 文章目录软件安装文档虚拟机安装系统死锁问题JDK11安装Docker安装Docker-Compose安装MySQL安装MySQL8安装Docker-Compose安装MySQL8MySQL5.7安装Nacos安装Docker安装Nacos单机Docker-Compose安装Nacos集群OpenResty安装Redis安装Docker安装单机RedisDocker-Compos…
阅读更多...
【Unity3D】点选物体、框选物体、绘制外边框

【Unity3D】点选物体、框选物体、绘制外边框

1 需求描述 点选物体&#xff1a;点击物体&#xff0c;可以选中物体&#xff0c;按住 Ctrl 追加选中&#xff0c;选中的物体设置为红色。框选物体&#xff1a;拖拽鼠标&#xff0c;屏幕上会出现滑动框&#xff0c;滑动框内的物体会被选中&#xff0c;选中的物体设置为红色。绘…
阅读更多...
Vue中自定义指令是什么？有哪些应用场景？

Vue中自定义指令是什么？有哪些应用场景？

一、什么是指令 开始之前先学习一下指令系统这个词 指令系统是计算机硬件的语言系统&#xff0c;也叫机器语言&#xff0c;它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力 在vue中提供了一套为数据驱动视图更为方便的操作&…
阅读更多...
【C语言进阶】qsort函数详解以及它的模拟实现

【C语言进阶】qsort函数详解以及它的模拟实现

目录一、qsort函数介绍二、qsort函数参数介绍2.1&#xff1a;void* base2.2&#xff1a;size_t num2.3&#xff1a;size_t size2.4&#xff1a;int(* compar)(const void *,const void *)三、实际应用3.1&#xff1a;利用qsort函数对整型数组排序3.2&#xff1a;利用qsort函数对…
阅读更多...
2023年1月9日：fastadmin在列表操作列区域添加按钮及控制已有按钮显示

2023年1月9日：fastadmin在列表操作列区域添加按钮及控制已有按钮显示

列表操作列区域添加按钮 buttons: [{name: detail,title: __(详情),classname: btn btn-xs btn-primary btn-dialog,icon: fa fa-list,url: audit/detail,callback: function (data) {Layer.alert("接收到回传数据&#xff1a;" JSON.stringify(data), {title: &q…
阅读更多...
【nvivo11plus教程】01_nvivo介绍、案例与批注

【nvivo11plus教程】01_nvivo介绍、案例与批注

1、查看nvivo版本2、nvivo是如何支持质性研究的3、nvivo的项目介绍4、建立nvivo项目(1)建立项目(2)文件夹(3)新建分类(4)建立备忘录5、案例(1)建立案例(2)案例节点分类的变量设置(3)归类案例6、批注7、备忘录链接1、查看nvivo版本 2、nvivo是如何支持质性研究的 是一个迭代的过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023