动态星空科技感粒子登录页 附代码复制即可用

最新推荐文章于 2024-06-23 13:13:26 发布
最新推荐文章于 2024-06-23 13:13:26 发布
阅读量4.8k 收藏 28
点赞数 5
分类专栏： 前端layui 文章标签： 科技感 大数据 粒子 动态星空 登录页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42197013/article/details/109110872
版权

效果图（仔细看会有星空效果和粒子效果）；背景可以放到任意页面中
在这里插入图片描述
代码：

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .cavs{
            z-index:1;
            position: fixed;
            width:95%;
            margin-left: 20px;
            margin-right: 20px;
        }

        html,body{
            width: 100%;
            height: 100%;

            background-image: url("loginbj.png");
            /*background-image: -webkit-linear-gradient(top, #02164f, #000);*/
            /*background-image: -moz-linear-gradient(top, #02164f, #000);*/
            /*background-image: -ms-linear-gradient(top, #02164f, #000);*/
            /*background-image: -o-linear-gradient(top, #02164f, #000);*/
            /*background-image: linear-gradient(to bottom, #02164f, #000);*/
            /*background-color: #1A1A1A;*/
        }



        .dela-presets-container-1 .dela-preset-1-2 {
            position: relative;
            font-size: 16px;
            width: 24.4em;
            min-width: 11em;
            padding: 5.6em 3.68em 6.1em 3.68em;
            box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
            font-family: Roboto;
            background: linear-gradient(to top, #b76cd2 0, #4c3bb3 100%);
        }
        .dela-presets-container-1 .dela-preset-1-2 .dela-form__title {
            color: #fff;
            margin: 0;
            font-size: 2.38em;
            font-weight: 400;
            text-align: center;
            margin-bottom: 0.89em;
        }
        .dela-presets-container-1 .dela-preset-1-2 {
            position: relative;
            font-size: 16px;
            width: 390px;
            padding: 56px 65px 55px 65px;
            box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
            font-family: Roboto;
            background: linear-gradient(to top, #b76cd2 0, #4c3bb3 100%);
        }

        .dela-presets-container-1 .dela-preset-1-2 input[type="email"], .dela-presets-container-1 .dela-preset-1-2 input[type="password"], .dela-presets-container-1 .dela-preset-1-2 input[type="text"] {
            color: #fff;
            font-family: Roboto;
            font-size: 1em;
            font-weight: 200;
            width: 100%;
            background: none;
            border: none;
            padding: 0.8em 0;
            border-bottom: 0.063em solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1.1em;
            border-radius: 0;
        }

        .dela-presets-container-1{
            z-index: 100;
            position: absolute;
            left: 35%;
            opacity: 0.8;
            top: 100px;
        }
        .dela-presets-container-1 .dela-preset-1-2 .dela-form__checkbox {
            display: inline-block;
            font-size: 0.875em;
            margin-top: 0.7em;
            font-weight: 200;
            cursor: pointer;
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        .dela-presets-container-1 .dela-preset-1-2 input[type="submit"] {
            margin: 0 auto;
            display: block;
            color: #fff;
            font-family: Roboto;
            font-size: 1em;
            font-weight: 200;
            width: 10.25em;
            min-height: 2.71em;
            background: none;
            border: 0.063em solid #fff;
            border-radius: 0.6em;
            cursor: pointer;
            margin-top: 2.1em;
            -webkit-appearance: none;
        }




        .stars, .twinkl {
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            width:100%;
            height:100%;
            display:block;
        }
        .ball{
            width: 100%;
            height: 282px;
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            display:block;
            background:#000 url(ball.jpg) repeat top center;
            z-index:0;
        }
        .stars {
            background:#000 url(stars.png) repeat top center;
            z-index:0;
        }

        .twinkl{
            background:transparent url(twinkling.png) repeat top center;
            z-index:0;

            -moz-animation:move-twink-back 200s linear infinite;
            -ms-animation:move-twink-back 200s linear infinite;
            -o-animation:move-twink-back 200s linear infinite;
            -webkit-animation:move-twink-back 200s linear infinite;
            animation:move-twink-back 200s linear infinite;
        }

        @keyframes move-twink-back {
            from {background-position:0 0;}
            to {background-position:-10000px 5000px;}
        }
         input::-webkit-input-placeholder {
             /* WebKit, Blink, Edge 适配谷歌*/
             color: #fff !important;
         }

        input::-moz-placeholder {
            /* Mozilla Firefox 4 to 18 适配火狐*/
            color: #fff !important;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 19+ 适配火狐*/
            color: #fff !important;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 适配ie*/
            color: #fff !important;
        }

        input:focus {
            outline-offset: -2px;
        }
        :focus {
            outline: -webkit-focus-ring-color auto 0px;
        }
    </style>
</head>
<body style="">
<canvas class="cavs" width="1857" height="927"></canvas>

<div class="stars"></div>
<div class="twinkl"></div>
<div class="ball"></div>
<div class="dela-presets-container-1">
<form class="dela-preset-1-2" action="?" method="get">
    <p class="dela-form__title">登录</p>
    <input type="text" name="name" placeholder="Name" required="" autocomplete="name">
    <input type="password" name="password" id="pass-1" placeholder="Password" required="">
    <input type="password" placeholder="Code" style="width: 216px;vertical-align: top;display: inline-block" name="repeat" oninput="this.setCustomValidity(this.value != document.getElementById('pass-'+1).value ? 'Passwords are not the same.' : '')"
        required="">
    <a style="display: inline-block;width: 164px;height: 43px;border: 1px #f00 solid"></a>
    <label class="dela-form__checkbox">记住我
        <input type="checkbox" name="policy" value="1" required="">
        <span></span></label>
    <input type="submit" name="submit" value="Login"></form>

</div>
<script src="jquery-3.0.0.min.js"></script>
<script src="ban.js"></script></body></html>

资源链接：https://download.csdn.net/download/qq_42197013/12937115

温暖的松子
关注
专栏目录
html5星空背景的登录页面带粒子特效
qq_43773083的博客
10-11 5403
html <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...
html5登录模板(动态星空背景)
07-03
动态星空背景的html5登录模板，很漂亮，可用于学生网页课程设计。
html5星空背景的登录页面带粒子特效代码
10-11
html5星空背景的登录页面带粒子特效代码帮运工一枚，仅供学习，不供商用
动态星空科技感粒子登录页 附代码复制即可用
10-16
动态星空科技感粒子登录页 附代码复制即可用；详细解说链接https://blog.csdn.net/qq_42197013/article/details/109110872
分享10款很酷的科技感登录界面
最新发布
FL06052146的博客
06-23 654
链接：https://pan.baidu.com/s/1uvuq1gfLekMiSeqpDdYWmg?
科技感动态效果引导页官网源码_引导页_
09-30
科技效果引导页大气科技效果 需要的可以自己下载看看啊
html5星空背景的登录页面带粒子特效.zip_Html5粒子星空_clublhz_html_登录界面_登录粒子
09-24
本资源“html5星空背景的登录页面带粒子特效.zip”提供了一个富有创新性的登录页面模板，利用HTML5的强大功能，将用户引入一个充满梦幻感的星空背景之中，同时结合粒子特效，提升了页面的视觉吸引力。 该登录页面的...
超简单css两张静态图片制作动态星空图（无需js和canvas,附所有代码复制即可用）
06-19
在本文中，我们将深入探讨如何使用CSS来创建一个动态星空图，无需JavaScript或Canvas的复杂操作。这个方法简单易行，适合初学者和有经验的开发者。只需复制提供的代码，您就能快速拥有一个迷人的星空效果。 首先，...
HTML5登录模板(炫酷动态星空背景)
11-23
HTML5登录模板(炫酷动态星空背景) ，给人以耳目一新的感觉，代码注释详细，分享给喜欢的朋友
粒子背景登录页面
10-08
网页制作、静态页面，带粒子背景的登录页面。炫酷页面。
科技感登陆界面
08-08
蓝色风格、画面非常酷炫、界面科技感十足的网站登录界面。
精美的登录页面（粒子特效+登录验证）
03-08
精美的登录页面（粒子特效+登录验证）
炫酷的动态登录页面
03-12
一个炫酷的动态登录页面，里面包含javascript,css,jquery技术。
HTML5 粒子动画背景登录页面模板
12-18
粒子动画背景登录页面
动态背景登录页面(基于jquery)
04-27
动态登录基于jquery做的，每隔几秒会自动将登录背景图片切换
科技感动态效果引导页官网源码
百度SEO程序下载
02-18 218
简介： 自带引导页，简单修改就可以作为自己官网  而且还有动态效果，全站以星星为主题打造，贼好看~ 网盘下载地址： http://www.bytepan.com/jL1B4HaEDav
2023 星空背景登录界面HTML源码
03-21 367
HTML5星空夜空背景登录界面模板，HTML5 canvas鼠标经过星星连线动态背景，账户和密码登录框透明效果。
html星空粒子特效代码
08-09
以下是一个简单的HTML星空粒子特效代码： ```html <!DOCTYPE html> <html> <head> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="starfield"></canvas> <script> // 创建画布 var canvas = document.getElementById("starfield"); var ctx = canvas.getContext("2d"); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 创建星星数组 var stars = []; var numStars = 100; // 初始化星星 for (var i = 0; i < numStars; i++) { stars[i] = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1.5 + 1, vx: Math.floor(Math.random() * 3) - 1.5, vy: Math.floor(Math.random() * 3) - 1.5 }; } // 绘制星星 function drawStars() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "white"; for (var i = 0; i < numStars; i++) { var star = stars[i]; ctx.beginPath(); ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false); ctx.fill(); } } // 更新星星位置 function updateStars() { for (var i = 0; i < numStars; i++) { var star = stars[i]; // 更新位置 star.x += star.vx; star.y += star.vy; // 边界检测 if (star.x < 0 || star.x > canvas.width) { star.vx = -star.vx; } if (star.y < 0 || star.y > canvas.height) { star.vy = -star.vy; } } } // 动画循环 function animate() { drawStars(); updateStars(); requestAnimationFrame(animate); } // 开始动画 animate(); </script> </body> </html> ``` 这段代码使用HTML5的canvas元素绘制了一个星空粒子特效。它创建了一个画布，然后在画布上绘制了一定数量的随机大小和位置的白色圆形来表示星星。每个星星都有一个随机的速度，它们会在画布上移动，并在达到边界时反弹。通过不断更新星星的位置并重新绘制它们，实现了一个看起来像星空的动态效果。你可以将该代码复制粘贴到一个HTML文件中，然后在浏览器中打开该文件来查看效果。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值