H5高仿Win10开机界面

什么叫易 · 发表于 2019-12-23 08:45:35

老版本浏览器可能不支持部分效果，比如模糊，ie需要用ie滤镜。
密码框没怎么动样式，w3school里面也没找到关于password的文档。
js用作点击事件，点击会更改背后滤镜。
密码：1997 设定的跳转微软官方。
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
      padding: 0;
      margin: 0;
      font-family: microsoft yahei light, microsoft yahei, sans-serif;
}

body {
      background: url("http://img4.tuwandata.com/v3/thumb/all/OTRiMywwLDAsOSwzLDEsLTEsTk9ORSwsLDkw/u/GvFPJrTJvB9HmAlQA3r9XKIA6flvoq6yhfI0zlP7ae8dEinhDiKAq1dqRAa0h6z8Y.gif")center / cover fixed;
}
/* 可以将3个元素封装在一个div，扩展会方便很多 */
.headfarme {
      /* 头像框 */
      font-size: 21px;
      width: 10em;
      height: 10em;
      background: url(touxiang.jpg) center / cover;
      border-radius: 5em;
      box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.8);
      position: absolute;
      left: 50%;
      margin-left: -5em;
      top: 20%;
      overflow: hidden;
}

.name {
      /* 昵称 */
      width: 100%;
      font-weight: normal;
      font-size: 36px;
      position: absolute;
      top: 55%;
      text-align: center;
      color: #FFFEE8;
      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.passwrod {
      /* 密码 */
      position: absolute;
      top: 65%;
      left: 50%;
      margin-left: -90px;
}

input[type="password"] {
      outline: none;
      padding: 7px 7px;
      font-size: 16px;
}

.passwrod:hover {
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.mainblur {
      /* 创立一个背景大小的块进行模糊处理 */
      position: absolute;
      background: url("http://img4.tuwandata.com/v3/thumb/all/OTRiMywwLDAsOSwzLDEsLTEsTk9ORSwsLDkw/u/GvFPJrTJvB9HmAlQA3r9XKIA6flvoq6yhfI0zlP7ae8dEinhDiKAq1dqRAa0h6z8Y.gif") 0 / cover fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      filter: blur(0px);
      z-index: -1;
      /* 阴影渐隐渐显 */
      transition: filter .5s;
}

</style>

<body>
<div class="mainblur" id="mainbg" onclick="bgclick()"></div>
<div class="headfarme"></div>
<h1 class="name">Micsoft Corporation</h1>
<div class="passwrod">
      <input type="password" placeholder="Password" onclick="passclick()" onkeyup="passkeyup()" id="pass">

</div>
<script>

      function passclick() {
         var id = document.getElementById("mainbg");
         id.style.filter = ("blur(20px)");
      }
      function bgclick(){
         var id = document.getElementById("mainbg");
         id.style.filter = ("blur(0)");
      }
      function passkeyup(){
         var id=document.getElementById("pass");
         if (id.value=="1997") {
            window.location = "https://www.microsoftstore.com.cn/";
         }
      }
</script>
</body>

</html>

kyo9766 · 发表于 2024-7-16 09:02:56

做个密码验证框也很棒，很漂亮，感谢分享

1031308775 · 发表于 2021-1-14 01:45:48

RE: H5高仿Win10开机界面

植秀峰 · 发表于 2020-1-12 11:54:59

这个界面的圆形图案是怎么设计的？

YS33 · 发表于 2019-12-29 16:05:15

二等分电风扇

疯源 · 发表于 2019-12-28 09:52:11

6666666666666666666666666666666

街边太多人与车 · 发表于 2019-12-23 10:23:35

RE: H5高仿Win10开机界面 [

asphxg · 发表于 2019-12-23 10:14:28

神马叫做易语言

		自动登录	找回密码
密码			注册

[JS例程分享] H5高仿Win10开机界面

本帖被以下淘专辑推荐: