动态背景用户登录

最新推荐文章于 2024-04-24 10:01:52 发布
最新推荐文章于 2024-04-24 10:01:52 发布
阅读量195 收藏 1
点赞数
分类专栏： css
blank
本文链接：https://blog.csdn.net/qq_41418797/article/details/107693159
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态背景登录</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--背景-->
<div class="wel" id="background-3"></div>
<!--左右两边云-->
<div class="wel" id="box">
    <div class="box-1 lefp"></div>
    <div class="box-1">
        <div class="righp"></div>
    </div>
</div>
<!--荧光点点-->
<div class="wel" id="git"></div>
<!--登录表-->
<div class="wel" id="from">
    <div class="box-2 le-1">
        <form action="" method="post">
            <div class="flrg">
                    <h3>登录</h3>
                <div class="a">
                    <!--<label>账号：</label>-->
                    <input type="text" class="in-1" placeholder="请输入账号">
                </div>
                <div class="a">
                    <!--<label>密码：</label>-->
                    <input type="password" class="in-1" placeholder="请输入密码">
                </div>
                <div class="a">
                    <button type="button">登录</button>
                </div>
                <div class="a">
                    <div class="hr"></div>
                </div>
                <div class="a">
                    <a href="#">忘记密码？</a>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

style.css

body{
    		margin: 0;
    		padding: 0;
    		height: 100%;
    		width: 100%;
    	}
    	/*背景*/
.wel{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#background-3{
	position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
/*两边的云*/
.box-1{
    width: 50%;
    height: 900px;
    float: left;
    overflow: hidden;
}
.box-2{
    width: 50%;
    position: relative;
    float: left;
    overflow: hidden;
    top: 25%;
}
.lefp{
    background: url("img/1baa42452320f5d4eb2f5e1f22cacebb.png");
    -webkit-animation: mylefp 10s;
    -o-animation: mylefp 10s;
    animation: mylefp 10s;
    position: relative;
    float: left;
    opacity: 0;
    background-position: 100% 0;
}
.righp{
    background: url("img/1baa42452320f5d4eb2f5e1f22cacebb.png") ;
    -webkit-animation: myrighp 10s;
    -o-animation: myrighp 10s;
    animation: myrighp 10s;
    position: relative;
    float: right;
    opacity: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#git{
    background: url("img/midground.png");
    -webkit-animation: mygit 100s linear infinite;
    -o-animation: mygit 100s linear infinite;
    animation: mygit 100s linear infinite;
}
/*左边云   opacity: 1;设置 div 元素的不透明级别：*/
@keyframes mylefp {
    0%{
        left: 0;
        opacity: 1;
    }
    100%{
        left: -60%;
        opacity: 0.6;
    }
}
@-o-keyframes mylefp {
    0%{
        left: 0;
        opacity: 1;
    }
    100%{
        left: -60%;
        opacity: 0.6;
    }
}
@-moz-keyframes mylefp {
    0%{
        left: 0;
        opacity: 1;
    }
    100%{
        left: -60%;
        opacity: 0.6;
    }
}
@-ms-keyframes mylefp {
    0%{
        left: 0;
        opacity: 1;
    }
    100%{
        left: -60%;
        opacity: 0.6;
    }
}
@-webkit-keyframes mylefp {
    0%{
        left: 0;
        opacity: 1;
    }
    100%{
        left: -60%;
        opacity: 0.6;
    }
}
/*右边云*/
@keyframes myrighp {
    0%{
        right: 0;
        opacity: 1;
    }
    100%{
        right: -120%;
        opacity: 0.6;
    }
}
@-webkit-keyframes myrighp {
    0%{
        right: 0;
        opacity: 1;
    }
    100%{
        right: -120%;
        opacity: 0.6;
    }
}
@-ms-keyframes myrighp {
    0%{
        right: 0;
        opacity: 1;
    }
    100%{
        right: -120%;
        opacity: 0.6;
    }
}
@-moz-keyframes myrighp {
    0%{
        right: 0;
        opacity: 1;
    }
    100%{
        right: -120%;
        opacity: 0.6;
    }
}
@-o-keyframes myrighp {
    0%{
        right: 0;
        opacity: 1;
    }
    100%{
        right: -120%;
        opacity: 0.6;
    }
}
/*荧光点点*/
@keyframes mygit {
    0%{
        background-position: 0 0;
        /*transform: translateY(0px);*/
    }
    100%{
        background-position: 0 -600%;
    }
}
@-o-keyframes mygit {
    0%{
        background-position: 0 0;
        /*transform: translateY(0px);*/
    }
    100%{
        background-position: 0 -600%;
    }
}
@-moz-keyframes mygit {
    0%{
        background-position: 0 0;
        /*transform: translateY(0px);*/
    }
    100%{
        background-position: 0 -600%;
    }
}
@-ms-keyframes mygit {
    0%{
        background-position: 0 0;
        /*transform: translateY(0px);*/
    }
    100%{
        background-position: 0 -600%;
    }
}
@-webkit-keyframes mygit {
    0%{
        background-position: 0 0;
        /*transform: translateY(0px);*/
    }
    100%{
        background-position: 0 -600%;
    }
}

.le-1{
    position: absolute;
    top: 100px;
    left: 180px;
    -webkit-animation: myflrg 10s;
    -o-animation: myflrg 10s;
    animation: myflrg 6s;

}
/*登录*/
.flrg{
    float: right;
    width: 300px;
    background: rgba(255,255,255,.6);
    text-align: center;
    padding-bottom: 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
/*账号*/
.a{
    margin: auto;
}
.flrg>.a{
    padding: 10px;
}
.flrg>.a>.in-1{
    outline: none;
    opacity: 0.6;
    width: 238px;
    height: 33px;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 16px;
    color: black;
    padding-left: 15px;
}
.in-1:focus{
    -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    -webkit-animation: myin-1 10s linear infinite;
    -o-animation: myin-1 10s linear infinite;
    animation: myin-1 10s linear infinite;
}
.flrg>.a>button{
    width: 91%;
    padding: 10px;
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
    box-shadow: 0 0 19px rgba(0, 0, 0, .1);
    background: rgba(6,127,228,0.71);
    color: white;
    font-weight: bold;
    letter-spacing: 12px;
    text-align: center;
    outline: none;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.flrg>.a>button:hover{
    -webkit-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset, 0 2px 7px 0 rgba(0,0,0,.2);
    -moz-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset, 0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset, 0 2px 7px 0 rgba(0,0,0,.2);
}
.hr{
    width: 91%;
    height: 2px;
    background: rgba(255,255,255,0.6);
    margin: auto;
}
/*忘记密码*/
.flrg>.a>a{
    text-decoration: none;
    font-weight: bold;
    color: #545454;
}

/*登录  0%--100% 即from--to 从开始到结束   实现从上到下的动画效果*/
@keyframes myflrg {
    0%{
        top: -300%;

    }
    100%{
        top: 25%; /*200px*/
    }
}
@-webkit-keyframes myflrg {
    0%{
        top: -300%;
    }
    100%{
        top: 25%;
    }
}
@-ms-keyframes myflrg {
    0%{
        top: -300%;
    }
    100%{
        top: 25%;
    }
}
@-moz-keyframes myflrg {
    0%{
        top: -300%;
    }
    100%{
        top: 25%;
    }
}
@-o-keyframes myflrg {
    0%{
        top: -300%;
    }
    100%{
        top: 25%;
    }
}
/*注册  实现从下到上的动画效果
@keyframes myflrg-2 {
    0%{
        top: 300%;
    }
    100%{
        top: 0;
    }
}*/
/*input呼吸框*/
@keyframes myin-1 {
    0%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
    50%{
        -webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        -moz-box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
    }
    100%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
}
@-webkit-keyframes myin-1 {
    0%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
    50%{
        -webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        -moz-box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
    }
    100%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
}
@-ms-keyframes myin-1 {
    0%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
    50%{
        -webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        -moz-box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
    }
    100%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
}
@-moz-keyframes myin-1 {
    0%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
    50%{
        -webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        -moz-box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
    }
    100%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
}
@-o-keyframes myin-1 {
    0%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
    50%{
        -webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        -moz-box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
        box-shadow:  0 0 33px #ff1000 inset, 0 0 18px #ff0300;
    }
    100%{
        -webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        -moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
        box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
    }
}

效果演示

奋斗的小菇凉
关注
专栏目录
登录页面动态波浪背景
南北极之间
06-11 201
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
php用户登录界面代码有背景,HTML和CSS实现动态背景登录页面
weixin_35645652的博客
03-10 2115
这篇文章主要介绍了HTML+CSS实现动态背景登录页面的相关资料,需要的朋友可以参考下1. 实现背景图片的动态变换首先在HTML页面body板块中，添加图片p，代码如下：再对图片进行css设计。你要对图片进行大小定位，那么以下代码肯定要首先编写：`.bgk {margin: auto;position: absolute;width: 1366px;height: 672px;overflow: ...
动态背景登录页面(基于jquery)
04-27
动态登录基于jquery做的，每隔几秒会自动将登录背景图片切换
动态背景登录
weixin_45743799的博客
03-07 791
前端动态背景登录 效果演示 完整代码 首先我们要导入jquery.js包 html代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">...
动态背景的CSS3登录表单
w1366352655的博客
12-01 609
动态背景的CSS3登录表单 在线演示 本地下载 posted @ 2018-12-01 22:45 栖息地 阅读(...) 评论(...) 编辑 收藏
登录页面(动态背景)
jakelihua
10-31 3287
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
HTML5动态背景登录页面模板
06-24
HTML5动态背景登录页面模板是现代网页设计中一个引人注目的实例，它结合了HTML5的先进技术与独特的视觉效果，旨在提供一个吸引用户并增强用户体验的登录界面。这款模板的特点在于其动态背景，通常包括浮动的气泡或...
Vue登录主页动态背景短视频制作
10-16
在本文中，我们将探讨如何在Vue项目中创建一个登录主页，该主页具有动态背景短视频的效果。这个功能可以提升用户体验，使登录页面更加生动和吸引人。 首先，我们需要在HTML部分设置`<video>`标签来嵌入动态背景视频...
html5+css3+js动态气泡背景用户登录页面模板
04-10
html5+css3+js动态气泡背景用户登录页面模板，适用于个性化的网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，...
HTML5用户登录框带背景特效
06-24
综上所述，"HTML5用户登录框带背景特效"是通过结合HTML5的语义元素、jQuery的交互处理和CSS3的动画技术，创造出具有动态背景和美观界面的登录界面。这个特效不仅提升了页面的视觉效果，也使得用户在登录过程中的交互...
HTML5登录模板(炫酷动态星空背景)
11-23
HTML5登录模板(炫酷动态星空背景) ，给人以耳目一新的感觉，代码注释详细，分享给喜欢的朋友
HTML+CSS实现动态背景登录页面
12-30
1. 实现背景图片的动态变换 首先在HTML页面body板块中，添加图片div，代码如下： <body> <div class=bgk> <div class=bgk-image xss=removed></div> <div class=bgk-image xss=removed></div> <div class=
html5登录模板(动态星空背景)
07-03
动态星空背景的html5登录模板，很漂亮，可用于学生网页课程设计。
Eclipse SWT 黑客帝国炫酷动态背景登录对话框
04-26
用Eclipse SWT 实现的动态背景对话框的源码，动态背景为黑客帝国字符雨效果，极为炫酷。高端大气且上档次。
炫酷科幻粒子动态背景后台登录特效代码
04-27
炫酷科幻粒子动态背景后台登录特效代码下载，带验证弹窗js特效。。 炫酷科幻粒子动态背景后台登录特效代码下载，带验证弹窗js特效。。
【随手分享】动态背景页面，可用作登录等页面
m0_46850900的博客
12-20 362
var num = 200; var w = window.innerWidth; var h = window.innerHeight; var max = 100; var _x = 0; var _y = 0; var _z = 150; var dtr = function(d) { return (d * Math.PI) / 180; }; var rnd = function() { return...
实现登录和注册透明，仿猎趣登录和注册界面实现
weixin_30507269的博客
05-17 218
实现登录和注册透明，仿猎趣登录和注册界面实现： 1.首先设置透明效果： 在Android中，有时需要我们做出透明的效果来满足用户更好的体验，大概总结下，在Android中有2种实现方法： 1.在配置文件内的activity属性上添加： android:theme="@android:style/Theme.Translucent" 就ok 2.在res/string下创建res-valu...
VUE 好看的登录页面-动态视频背景
℡メ㏑╭ァ小凯
06-04 3754
【代码】VUE 好看的登录页面-动态视频背景。
前端H5动态背景登录页面（下）
最新发布
qq_43826289的博客
04-24 1371
前端H5动态背景登录页面（下）
jsp美化动态背景登录
11-10
总之，通过JSP美化动态背景登录可以让用户体验更加友好和美观，同时也能提升网站的整体形象和用户满意度。这种技术不仅可以应用在登录界面，也可以扩展到其他页面的美化和动态效果设计中，提升网站的用户体验和吸引...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值