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

最新推荐文章于 2024-05-30 09:18:07 发布
最新推荐文章于 2024-05-30 09:18:07 发布
阅读量4.7k 收藏 27
点赞数 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

温暖的松子
关注
  • 5
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
JQ动态粒子效果
s_alin的博客
06-02 299
x = event.clientX - offset.left + this.$window.scrollLeft(),//clientX js鼠标事件。var offset = this.$container.offset(), //offset方法返回或设置匹配元素相对于文档的偏移（位置）/*overflow属性指定如果内容溢出一个元素的框，会发生什么 其属性值hidden表示内容会被修建，并且其余内容是不可见的*///translationCount动画过渡数量 影响点击颜色变化的深浅度。
动态星空科技感粒子登录页 附代码复制即可用
10-16
动态星空科技感粒子登录页 附代码复制即可用；详细解说链接https://blog.csdn.net/qq_42197013/article/details/109110872
html5星空太空粒子动画库插件特效代码
03-20
html5星空太空粒子动画库插件是一款轻量级炫酷js粒子动画库插件。
3d效果动态无限星空粒子宇宙图
06-24
基于three.js的无限宇宙图，可自由修改背景色和粒子效果。
可视化登录页不搞点科技感和神秘感，都不好意思和别人打招呼。
最新发布
2401_82616673的博客
05-30 711
需要注意的是，设计要保持简洁和易用性，不要过于复杂或过度装饰，以确保用户能够轻松理解和使用登录页。同时，根据实际需求和目标用户群体，适当调整设计风格，以达到更好的用户体验和视觉效果。
html5好看的高科技登录页面模板源码
04-30
资源描述： html5好看的高科技登录页面模板源码，好看的登录页面源码，高科技登录页面源码，登录页面模板，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。 效果演示地址： https://blog.csdn.net/weixin_43151418/article/details/134682321
threejs地球、星空、世界轮廓绘制、飞线、坐标涟漪 、旋转动画（上篇）
星宇大前端
01-07 7186
一个基于threejs实现的漂亮的3d地球，干货，干的你咽不下去。
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏
LuckyWinty的博客
09-07 805
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景近期工作有涉及到数字大屏的需求，于是利用业余时间，结合 Three.js 和 CSS实现赛博朋克2077风格视觉...
玩转代码|三个惊艳的黑科技代码，每一行代码都有惊讶的效果
Jum的博客
06-30 1235
可以在页面中加一些标签，比如文字，实现的效果都是不错的噢~
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 4605
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
html5星空背景的登录页面带粒子特效代码
10-11
在这个“html5星空背景的登录页面带粒子特效代码”项目中，我们可以深入探讨HTML5的一些核心特性以及如何通过它们实现粒子特效。 首先，HTML5引入了新的元素来更好地结构化网页内容，如`<header>`、`<nav>`、`...
html5星空背景的登录页面带粒子特效
09-27
在此项目中，粒子特效的加入增加了趣味性，可能有助于吸引用户并缓解等待登录验证时的焦虑感。 综上所述，"html5星空背景的登录页面带粒子特效"是一个结合了HTML5、CSS3和JavaScript技术的优秀示例，展示了现代Web...
html5星空背景的登录页面带粒子特效.zip_Html5粒子星空_clublhz_html_登录界面_登录粒子
09-24
本资源“html5星空背景的登录页面带粒子特效.zip”提供了一个富有创新性的登录页面模板，利用HTML5的强大功能，将用户引入一个充满梦幻感的星空背景之中，同时结合粒子特效，提升了页面的视觉吸引力。 该登录页面的...
html 3D粒子波浪登录页面
04-10
html 3D粒子波浪登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多...
转载：技术大停滞——范式春梦中的地球工业文明6 台阶的本质：复杂度魔鬼
huagengpai1994的博客
12-18 3151
转载：技术大停滞——范式春梦中的地球工业文明6 台阶的本质：复杂度魔鬼导读6 台阶的本质：复杂度魔鬼6.1 何为复杂度？6.2 纷繁世界背后的两条规则：适者生存和资本回报预期6.3 技术进步和技术革命：复杂度的变迁6.3.1 运输/动力系统的演进例子6.3.2 技术革命的特点和复杂度的变化6.3.3 正在面临的高复杂度科学魔鬼6.3.4 源自技术根底的困境6.4 高复杂度带来的诸多恶果（more ...
20170916导出fuck 7654导航
qq_22012149的博客
09-16 3万+
Bookmarks 书签栏 unity Unity游戏开发有哪些让你拍案叫绝的技巧？ 【Unity3D学习 愤怒的小鸟攻略技巧秘籍 unity3d技巧 unity3d愤怒的小鸟实现 unity3d切换关卡 unity3d切换场景代码 unity3d 透明shader】 Unity3D Unity 毛玻璃效果（UGUI） 性能优化，进无止境 [网络开发教程] 最好用Uni
在互联网上，没有人知道你是一条狗？
热门推荐
信息安全-企业安全-数据安全
08-22 3万+
1993 年，《纽约客》（The New Yorker）杂志刊登一则由彼得·施泰纳（Peter Steiner）创作的漫画：标题是【On the Internet, nobody knows you’re a dog.】 这则漫画中有两只狗：一只黑狗站在电脑椅上，爪子扶着键盘。它望向站在地上、表情迷茫的另一只狗，兴奋地说：「在互联网上，没人知道你是一条狗。 （On the Internet, nobody knows you’re a dog.）画中那只狗的台词随即成了 IT 界广为流传的经典笑话。 那个
web期末作业设计网页动态图
05-20
好的，我可以给你一些建议来设计网页动态图。 1. 使用CSS3动画效果 CSS3提供了很多动画效果，如旋转、缩放、移动等，可以利用这些效果来制作动态图。例如，你可以从左到右依次展示图片、文字或者其他元素。 2. 使用JavaScript的动画库 JavaScript的动画库可以实现更复杂的动画效果，如滑动、淡入淡出、弹出等。其中比较流行的动画库有jQuery、GreenSock、Velocity等。 3. 利用SVG制作动态图 SVG是一种矢量图形语言，可以制作各种形状的动态图。利用SVG可以制作出非常精美的动画效果，如动态文本、线条、形状等。 4. 利用Canvas绘制动态图 Canvas是HTML5中的图形绘制技术，可以用来绘制各种复杂的图形和动画效果。利用Canvas可以制作出非常炫酷的动态图，如动态背景、粒子效果等。 以上是一些常用的制作动态图的方法，你可以根据自己的需求选择合适的方法。同时也需要注意动态图的大小和加载速度，避免影响网页性能和用户体验。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值