html、css、JavaScript 制作网站起始页（必应搜索，可改）

本文链接：https://blog.csdn.net/2302_77163393/article/details/140516800
Hello everyone，欢迎您阅读我的文章，在这一期我为大家带来我自主编辑开发的起始页，您可以访问 https://info.clte.top 查看效果，先贴源码：
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>起始页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            background-image: url('default1.png'); // 这里把“default1.png”更改为背景链接或网站根目录图片路径
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .search-container {
            width: 100%;
            max-width: 600px;
            text-align: center;
            display: grid;
            align-items: center;
            justify-items: center;
            align-self: center;
        }

        .search-box {
            width: 200px;
            height: 40px;
            line-height: 40px;
            border-radius: 20px;
            overflow: hidden;
            margin-bottom: 20px;
            transition: width 0.3s ease;
            position: relative;
            background-color: #46464530;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: rgb(0, 0, 0) 0px 3px 8px;
            display: flex;
            justify-content: center;
        }

        .search-box.focused {
            width: 350px;
        }

        .search-box input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background-color: transparent;
            font-size: 16px;
            padding: 0 10px;
            text-align: center;
            color: #ffffff;
        }

        body {
            /*transition: 1s ease;*/
        }

        body.blurred-background {
            /*background-color: rgba(255, 255, 255, 0.7);*/
            /*backdrop-filter: blur(10px);*/
            /*-webkit-backdrop-filter: blur(10px);*/
            /*position: relative;*/
        }

        #time {
            color: #ffffff;
            font-size: 45px;
            padding: 15px;
            transform: scale(1);
            transition: transform 0.3s ease-in-out;
        }

        #time:hover {
            transform: scale(1.2);
        }

        .end {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            background-color: #46464530;
            color: #ffffff;
            text-align: center;
            position: relative;
            clear: both;
            width: 100%;
            padding: 5px 0px;
            font-size: 15px;
            position: fixed;
            left: 0;
            bottom: 0;
            box-shadow: rgb(0, 0, 0) 0px 3px 8px;
        }

        a {
            transition: transform 0.3s ease-in-out;
            color: #ffffff;
            text-decoration: none;
        }

        @keyframes bounce {

            0%,
            100% {

                transform: translateY(0);

            }

            50% {

                transform: translateY(-10px);

            }

        }

        p {
            color: #ffffff;
        }

        .end a {
            color: #ffffff;
            text-decoration: none;
            font-size: 15px;
            transition: color 0.2s ease;
        }

        .end a:hover {
            text-decoration: none;
            color: #979797;
            border-bottom: #979797 solid 3px;
        }

        button {
            background-color: #ffffff00;
            border: none;
            width: 40px;
            padding: 0px 15px 0px 15px;
        }

        button:hover {
            background-color: #00000021;
            border: none;
            width: 40px
        }

        .bing {
            padding: 0px 0px 0px 10px;
            text-align: center;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <!-- 搜索容器 -->
    <div class="search-container">
        <!-- 时钟元素 -->
        <a id="openPopup">
            <div id="time"></div>
        </a>
        <!-- 搜索框 -->
        <div class="search-box" id="searchBox">
            <div class="bing">Bing</div>
            <input type="text" id="searchInput" placeholder="搜索">
            <button id="searchButton"><a class="fa fa-search"></a></button>
        </div>
        <!-- 底部版权信息 -->
        <div class="end"> &copy; 2024 <a target="_blank" href="https://cloudbyte.one">云端字节（中国）工作室</a> | Beta(OBT).v24717</div>
    </div>
    <!-- JavaScript 代码 -->
<script>
        document.getElementById('searchButton').addEventListener('click', function () {
            const searchValue = document.getElementById('searchInput').value;
            if (searchValue.trim() !== '') {
                window.open(`https://www.bing.com/search?q=${encodeURIComponent(searchValue)}`, '_blank');
            }
        });
    </script>
    <!--背景模糊-->
    <script>
        document.getElementById('searchBox').addEventListener('mouseover', function () {
            this.classList.add('focused');
        });

        document.getElementById('searchBox').addEventListener('mouseout', function () {
            if (!this.querySelector('input').value) {
                this.classList.remove('focused');
            }
        });

        document.getElementById('searchBox').addEventListener('click', function () {
            this.classList.add('focused');
        });

        // 输入框失去焦点没有输入时取消聚焦效果  
        document.getElementById('searchBox').querySelector('input').addEventListener('blur', function () {
            if (!this.value) {
                document.getElementById('searchBox').classList.remove('focused');
            }
        });

        document.getElementById('searchBox').addEventListener('input', function () {
            // 获取输入框的值检查它是否非空  
            var inputValue = this.querySelector('input').value.trim();

            // 根据输入框的值是否为空给body添加或移除blurred-background类  
            if (inputValue !== '') {
                document.body.classList.add('blurred-background');
            } else {
                document.body.classList.remove('blurred-background');
            }
        });

        document.getElementById('searchBox').addEventListener('input', function () {
            // 获取输入框的值，并检查它是否非空  
            var inputValue = this.querySelector('input').value.trim();

            // 根据输入框的值是否为空，给body添加或移除blurred-background类  
            if (inputValue !== '') {
                document.body.classList.add('blurred-background');
            } else {
                document.body.classList.remove('blurred-background');
            }
        });

        // 输入框失去焦点没有输入时移除blurred-background类  
        document.getElementById('searchBox').querySelector('input').addEventListener('blur', function () {
            if (!this.value.trim()) {
                document.body.classList.remove('blurred-background');
            }
        });
    </script>
    <!-- 时钟 -->
    <script>
        function updateTime() {
            var now = new Date();
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            var seconds = String(now.getSeconds()).padStart(2, '0');

            var timeString = hours + ':' + minutes;
            document.getElementById('time').textContent = timeString;
        }

        // 首次加载时更新时间  
        updateTime();

        // 每秒更新时间  
        setInterval(updateTime, 1000);
    </script>
</body>

</html>
代码快里面有注释，如果不懂可以在评论区提出问题或发送邮件到 abc@clte.top。