js+css模拟windows95错误提示无穷无尽效果代码

代码语言:html

所属分类:其他

代码描述:js+css模拟windows95错误提示无穷无尽效果代码

代码标签: js css 模拟 windows 95 错误 提示 无穷无尽

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  




  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  
  
<style>

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
button {
  color: #000000;
  cursor: url(//repo.bfw.wiki/bfwrepo/icon/637e1f868f13e.png) 0 0, default;
  font: 12px/18px "MS Sans Serif", Helvetica, sans-serif;
}

body {
  background-color: #188080;
  display: grid;
  height: 100vh;
  overflow: hidden;
}

.window {
  background-color: #c0c0c0;
  box-shadow: -1px -1px 0 #000000 inset, 1px 1px 0 #dfdfdf inset, -2px -2px 0 #808080 inset, 2px 2px 0 #ffffff inset;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: calc(50% - 60px);
  left: calc(50% - 148px);
  padding: 3px;
  min-width: 296px;
  min-height: 119px;
  white-space: nowrap;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.window[hidden] {
  display: none;
}
.window__sprite {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}
.window__sprite--close {
  box-shadow: 5px 4px #000000, 6px 4px #000000, 6px 5px #000000, 7px 5px #000000, 7px 6px #000000, 8px 6px #000000, 9px 6px #000000, 10px 6px #000000, 10px 5px #000000, 11px 5px #000000, 11px 4px #000000, 12px 4px #000000, 8px 7px #000000, 9px 7px #000000, 7px 8px #000000, 8px 8px #000000, 9px 8px #000000, 10px 8px #000000, 6px 9px #000000, 7px 9px #000000, 11px 9px #000000, 10px 9px #000000, 5px 10px #000000, 6px 10px #000000, 12px 10px #000000, 11px 10px #000000;
}
.window__sprite--close-disabled {
  box-shadow: 5px 4px #808080, 6px 4px #808080, 6px 5px #808080, 7px 5px #808080, 7px 6px #808080, 8px 6px #808080, 9px 6px #808080, 10px 6px #808080, 10px 5px #808080, 11px 5px #808080, 11px 4px #808080, 12px 4px #808080, 8px 7px #808080, 9px 7px #808080, 7px 8px #808080, 8px 8px #808080, 9px 8px #808080, 10px 8px #808080, 6px 9px #808080, 7px 9px #808080, 11px 9px #808080, 10px 9px #808080, 5px 10px #808080, 6px 10px #808080, 12px 10px #808080, 11px 10px #808080, 12px 5px #ffffff, 13px 5px #ffffff, 11px 6px #ffffff, 12px 6px #ffffff, 10px 7px #ffffff, 11px 7px #ffffff, 8px 9px #ffffff, 9px 9px #ffffff, 7px 10px #ffffff, 8px 10px #ffffff, 6px 11px #ffffff, 7px 11px #ffffff, 12px 11px #ffffff, 13px 11px #ffffff;
}
.window__button {
  background-color: #c0c0c0;
  border-radius: 0;
  box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #808080 inset, 2px 2px 0 #dfdfdf inset, 1px 0 0 #000000, 0 1px 0 #000000, 1px 1px 0 #000000;
  letter-spacing: 1px;.........完整代码请登录后点击上方下载按钮下载查看

网友评论0