页面登陆特效（由页面放大或缩小来触发）

最新推荐文章于 2022-08-15 16:20:39 发布

BinParker

最新推荐文章于 2022-08-15 16:20:39 发布

阅读量627

点赞数 2

分类专栏：前端文章标签： css html js html5 css3

本文链接：https://blog.csdn.net/BinParker/article/details/104426096

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

登陆特效的展示

首先要知道@media screen and (max-width: px)，在标准浏览器下的固定宽度（假如标准浏览器的分辨率为100px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于100px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。
同理，当浏览器的可视区域改变到某个值（假如为200px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。

我们这里所用到的主要包括了响应式，媒体查询器和弹性布局（display，justify-content，alight-items…）等技术；
了解PC端设计和移动端设计的区别。

如下为HTML代码：

<!DOCTYPE html>
<html>    
<head>        
 <meta charset="utf-8">        
 <title></title>        
 <link href="css/xxx.css" type="text/css" rel="stylesheet"/>    
 </head>    
 <body>        
	<div class="wrap-panel">            
	<div class="login-panel">                
	<div>欢迎回来，登录</div>                
<div>                    
	<input type="text" name="用户名"/></div>                
<div>                    
<input type="password" name="密码"/></div>                
<div>                    
<button>登录</button></div>            
	</div>            
	<video src="img/xxxxxx.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>        
	</div>    
  </body>
</html>

CSS代码如下：

* {    margin: 0;    padding: 0;}
html, body {    width: 100%;    height: 100%;}
.wrap-panel {    width: 100%;    height: 100%;    background-image: url(../img/xxx.jpg);    background-size: cover;        /* 登录框的居中位置，弹性布局 */    display: flex;    justify-content: center;    align-items: center;}
.login-panel {    height: 400px;    width: 500px;    background-color: rgba(18, 2, 5, 0.45);    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}
.login-panel > div {    height: 40px;    width: 70%;    margin-bottom: 20px;}
.login-panel > div:nth-of-type(1) {    width: 60%;    text-align: center;    line-height: 40px;    color: #fff;    font-weight: bold;    font-size: 1.7rem;}
.login-panel > div:nth-of-type(2) {    border-radius: 20px;}
.login-panel > div:nth-of-type(3) {    border-radius: 20px;}
.login-panel > div > input, button {    height: 100%;    width: 100%;    border: none;    border-radius: 20px;}
video {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    object-fit: cover;    z-index: -1;}
@media screen and (max-width: 700px) 
{    
	.wrap-panel {        background-image: none;    }    
	.login-panel {        background-color: initial;    }
}