实操html与css 登录界面 | 青训营

钟爱野菜
165 阅读10分钟

成果展示：

代码解析：

HTML代码展示部分：

<body bgcolor="black">
<div class="comtainer">
<div class="bg">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="glass">
  <div class="texts">登录</div>
  <input type="text" placeholder="账号">
  <input type="password" placeholder="密码">
  <button>→</button>
</div>
</div>

其中：

  • <body bgcolor="black">这一行代表的是设置了 body 元素的背景色为黑色。
  • <div class="container">标签用于定义 HTML 文档中的一个容器。这里定义了一个 class 为 "container" 的 div 容器，用于包含后续的内容。
  • 下述类中中包含了三个span元素。用于对文本进行样式化。容器中包含了一个 class 为 "glass" 的 div 容器。它的作用可能是创建一个透明的容器，类似玻璃的效果。
<div class="bg">
<span></span>
<span></span>
<span></span> 
</div>

下面依次包含了以下内容：

  • 一个 class 为 "texts" 的 div 容器，显示文本 "登录"。
  • 一个输入框，类型为文本（type="text"），并设置了一个占位文本 "账号"。
  • 一个密码输入框，类型为密码（type="password"），并设置了一个占位文本 "密码"。
  • 一个按钮，显示一个箭头 "→"。
<div class="glass">
<div class="texts">登录</div> 
<input type="text" placeholder="账号">
<input type="password" placeholder="密码"> 
<button>→</button> </div>

这个 HTML 代码片段创建了一个黑色背景的页面，包含了一个登录表单。登录表单由一个透明的容器包裹，具有背景效果。表单包含了账号输入框、密码输入框和登录按钮。

CSS展示部分：

container 类选择器定义了一个宽度为 800px，高度为 800px 的容器。依据 margin: 0 auto 具体实现居中对齐。position:relative设置了容器的定位方式为相对定位，代码如下：

.container{
  width:800px;
  height:800px;
  margin:0 auto;
  position:relative;
}
  • 首先glass 类选择器定义了一个宽度为 360px，高度为 480px 的容器。
  • 然后通过 position:absolute; 将其设置为绝对定位，
  • 接下来的 top 和 left 属性用于确定其位置。
  • border-radius:20px; 设置圆角边框半径为 20px。color:#eee; 设置文本颜色为浅灰色。
  • backdrop-filter:blur(10px); 使用模糊滤镜对背景进行模糊处理。
  • box-shadow 属性添加了两个阴影效果，内部的阴影插入容器，并且外部阴影提供了某种深度和立体感。
  • 最后，通过 animation 属性应用了一种动画效果。

代码如下：

.glass{
    position:absolute;
    width:360px; 
    height:480px; 
    top:160px; 
    left:220px; 
    border-radius:20px; 
    color:#eee; 
    background:rgba(255,255,255,0.05); 
    backdrop-filter:blur(10px); 
    box-shadow:insert 1px 1px 6px rgba(255,255,255,0.3),2px 2px 15px rgba(0,0,0,0.5); 
    animation:am3 ease-out 1s 0.2s backwards;
    }

glass:hover 伪类选择器表示当鼠标悬停在 glass 容器上时触发的样式。这段代码改变了 box-shadow 的值，使其显示不同的效果，并且修改了背景的模糊度。
代码如下：

glass:hover{ 
    box-shadow:inset 1px 1px 3px rgba(255,255,255,0.9),4px,4px,25px,rgba(0,0,0,0.9); 
    backdrop-filter:blur(7px); 
}

button:hover 伪类选择器表示当鼠标悬停在按钮上时触发的样式。这段代码修改了按钮的宽度、边框半径和左边距以改变其样式。同时，通过 box-shadow 添加了两个阴影效果，为按钮提供了一种浮起和立体的感觉,代码如下：

button:hover{ 
    width:160px; 
    border-radius:70px; 
    margin-left:105px; 
    box-shadow:0px 0px 10px #999,insert 0px 0px 5px #333; 
}

bg 类选择器定义了一个宽度为 800px，高度为 800px 的容器。通过 position:absolute; 将其设置为绝对定位。通过 top 和 left 属性将其定位在父容器的左上角。animation 属性应用了一种动画效果。
代码如下：

.bg{ 
    position:absolute; 
    width:800px; 
    height:800px; 
    top:0; 
    left:0; 
    animation:am2 ease-out 1s; 
}

input 标签选择器定义了文本输入框的样式。

  • background:transparent; 使得背景透明。
  • outline:none; 移除了文本框的边框。
  • width:80%;设置宽度为容器的 80%。
  • height:45px; 设置高度为 45 像素。
  • color:#eee; 设置文本颜色为浅灰色。
  • font-size:18px; 设置字体大小为 18 像素。
  • margin-left:34px; 和 margin-top:40px; 分别设置左边距和上边距。
    代码如下：
input{ 
       background:transparent; 
       outline:none; 
       border:none; 
       border-button:1px solid #666; 
       width:80%; 
       height:45px; 
       color:#eee; 
       font-size:18px; 
       margin-left:34px; 
       margin-top:40px; 
}

texts 类选择器定义了一段文本的样式。

  • display:inline-block; 将文本显示为内联块元素，可以水平排列。
  • font-size:26px; 设置字体大小为 26 像素。
  • margin-left:34px; 和 margin-top:50px; 设置左边距和上边距.
    代码如下：
.texts{ 
       display:inline-block; 
       font-size:26px; 
       margin-left:34px; 
       margin-top:50px; 
}

button 标签选择器定义了按钮的样式。

  • border:none; 移除了按钮的边框。
  • width:70px; 和 height:70px; 分别设置宽度和高度为 70 像素，使按钮呈现为一个圆形。
  • border-radius:50%; 设置圆角半径为 50%，使按钮更加圆润。
  • color:#eee; 设置文本颜色为浅灰色。
  • font-weight:bold; 设置粗体字体。
  • font-size:28px; 设置字体大小为 28 像素。
  • margin-left:145px; 和 margin-top:71px; 设置左边距和上边距。
  • cursor:pointer; 设置鼠标悬停时显示为手型光标。
  • background:rgba(255,255,255,0.1); 设置背景颜色为白色，并应用了透明度。
  • box-shadow:0px 2px 10px #eee; 添加了一个具有水平和垂直偏移以及模糊效果的阴影。
    代码展示如下：
button{ 
      border:none; 
      width:70px; 
      height:70px; 
      border-radius:50%; 
      color:#eee; 
      font-weight:bold; 
      font-size:28px; 
      margin-left:145px; 
      margin-top:71px; 
      cursor:pointer; 
      background:rgba(255,255,255,0.1); 
      box-shadow:0px 2px 10px #eee; 
}

span 标签选择器定义了一个用于装饰的圆形元素的样式。

  • background:blue; 设置背景颜色为蓝色。
  • position:absolute; 将其设置为绝对定位。
  • top:117px; 和 left:143px; 设置元素距离父容器的上边缘和左边缘的距离。
  • width:120px; 和 height:120px; 设置宽度和高度为 120 像素，使其呈现为一个正圆。
  • border-radius:50%; 设置圆角半径为 50%，使得元素呈现为圆形。
  • box-shadow:1px 1px 50px #eee; 添加了一个具有水平和垂直偏移以及模糊效果的阴影。
    代码如下：
span{ 
     background:blue; 
     position:absolute; 
     top:117px; 
     left:143px; 
     width:120px; 
     height:120px; 
     border-radius:50%; 
     box-shadow:1px 1px 50px #eee; 
}

span:nth-child选择器用于选择父容器中的第一个 span 元素并设置其样式。在这里，我将三个元素的位置、尺寸和背景颜色进行了修改，使其呈现为紫色，橙色，青色的圆形。
代码如下：

span:nth-child(1){
    top:117px;
    left:143px;
    width:120px;
    height:120px;
    background:purple;
  }
  span:nth-child(2){
    top:518px;
    left:434px;
    width:200px;
    height:200px;
    background:orange;
  }
  span:nth-child(3){
    top:196px;
    left:483px;
    width:60px;
    height:60px;
    background:cyan;
  }

这些选择器分别为每个 span 元素应用了动画效果。使用了不同的动画名称和时间参数，使得它们在不同的速度和方向上进行往返运动。

span:nth-child(1){
    animation:am1 ease-in-out 3s infinite alternate;
  }
  span:nth-child(2){
    animation:am1 ease-in-out 4s infinite alternate-reverse;
  }
  span:nth-child(3){
    animation:am1 ease-in-out 2.5s 0.5s infinite alternate;
  }

这段代码使用了@keyframes规则来定义一个名为"am1"的动画。它描述了两个关键帧之间的动画行为，分别表示为0%和100%。这个动画通过translateY属性逐渐改变元素沿着y轴（垂直方向）的位置。在这个例子中，元素从初始位置开始（translateY(0)），向上移动30个像素（translateY(-30px)）从而展示出动画效果。
代码如下：

@keyframes am1{
    0%{transform:translateY(0);}
    100%{transform:translateY(-30px);}
  }

类似地，这段代码定义了一个名为"am2"的动画，它操作了元素的缩放和旋转。在动画开始时（0%），元素的缩放设置为0（宽度和高度都为0）使用scale(0,0)，并且它以顺时针方向旋转60度（rotateZ(60deg)）。随着动画的进行到100%，元素逐渐恢复到正常大小1（宽度和高度），使用scale(1,1)，并且旋转被重置为0度，使用rotateZ(0)。

@keyframes am2{ 
    0%{transform:scale(0,0) rotateZ(60deg);}
    100%{transform:scale(1,1) rotateZ(0);} 
    }

最后一个动画"am3"结合了沿y轴的移动和不透明度的变化。从0%开始，元素向上移动8个像素（translateY(8px)）并且其不透明度被设置为0（opacity:0）。随着动画进行到100%，元素沿y轴回到原来的位置（translateY(0)），并且其不透明度增加到完全可见（opacity:1）。

@keyframes am3{ 
0%{transform:translateY(8px);opacity:0} 
100%{transform:translateY(0);opacity:1} 
}

实操心得：

HTML5和CSS3是现代web开发中常用的技术，它们提供了丰富的功能和效果，使得网站的设计和用户体验更加出色。在本次实操中，我通过应用@keyframe、backdrop-filter:blur()和animation技术，实现了一个登录界面。以下是我的心得体会以及个人感想：

  • 首先，在实操过程中，我通过视频充分利用了@keyframe规则来创建动画效果。通过定义关键帧，我可以控制元素在不同时间点的状态，从而实现平滑的动画过渡效果。这对于创建视觉吸引力强烈的登录界面非常有用。通过设置元素的初始状态和结束状态，并使用动画属性指定动画名称、持续时间和缓动函数，我能够让元素在页面上动态地运动、旋转或者改变大小。
  • 其次，backdrop-filter:blur()是一个非常有用的CSS属性，它可以让元素的背景模糊化。在登录界面中，我可以利用这个属性来创建一个模糊背景效果，使整个界面看起来更加高端和时尚。通过将该属性应用于登录框的容器元素，我可以让背景图片或颜色在登录框周围产生模糊效果，从而突出登录框本身，提升用户对登录操作的注意力。
  • 最后，animation技术为我提供了更加灵活和细致的控制元素动画的能力。通过定义关键帧动画和使用animation属性，我可以为元素添加多个动画效果，并设置它们的持续时间、缓动函数、重复播放等属性。在登录界面中，我可以利用animation技术为按钮添加闪烁的效果，吸引用户的目光，增加交互性和动感。

总的来说，通过使用HTML5和CSS3技术，我成功地模仿了一个令人印象深刻的登录界面，并且加入了@keyframe、backdrop-filter:blur()和animation等特性，使界面具有更好的视觉效果和用户体验。我发现这些技术的运用不仅能够让界面更加生动和吸引人，还可以提升用户的操作体验和网站的整体品质。 在实操过程中，我也面临了一些挑战。首先，需要深入理解每个技术的特点和用法，以便正确应用到登录界面中。其次，调试和优化动画效果是一个迭代的过程，需要不断尝试和调整参数，以达到最佳效果。此外，在使用backdrop-filter:blur()属性时，需要注意浏览器的兼容性和性能问题，确保在各种设备和浏览器中都能良好运行。 通过这次实操，我对HTML5和CSS3的运用有了更深入的了解，也提升了我的前端开发能力。我将继续学习和探索新的技术，不断提升自己的技能，以创造更好的用户体验和网站设计。加油！
PS:本次实操借鉴的b站up主哆啦niko

avatar
文章
阅读
粉丝