html模仿mac苹果电脑桌面效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


<style>
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
.toggle {
  width: 15vw;
  height: auto;
  max-width: 150px;
  transition: none;
  cursor: pointer;
  position: fixed;
  bottom: -4%;
  right: 0;
  background: none;
  border: none;
}
.toggle.dark img {
  -webkit-filter: invert(0.8);
          filter: invert(0.8);
}
.toggle img {
  width: 100%;
  height: auto;
}

#signature {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 24px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  position: fixed;
  transition: all 0;
  z-index: 9999999;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  padding: 0;
  width: 50vw;
  height: 100vh;
  max-width: 500px;
  opacity: 0;
  position: fixed;
  box-shadow: -2px 0 15px rgba(0, 0, 0, 0.6);
  bottom: 0;
  background: linear-gradient(to bottom, #5e8ad9, #1e4180);
}
@media only screen and (max-width: 800px) {
  #signature {
    display: none;
  }
}
#signature #close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1em;
  height: 2em;
  width: 2em;
  cursor: pointer;
  display: block;
}
#signature #close svg {
  fill: rgba(255, 255, 255, 0.4);
  width: 100%;
  height: auto;
  display: block;
}
#signature #close svg:hover {
  fill: #fff;
}
#signature #close:hover svg {
  fill: #fff;
}
#signature svg {
  height: 2em;
  display: inline-block;
  vertical-align: middle;
}
#signature * {
  box-sizing: border-box;
}
#signature .icon {
  width: 80%;
  height: auto;
}
#signature .icon img {
  width: 100%;
  height: auto;
}
#signature h2 {
  font-weight: 100;
  font-size: 1.25em;
}
#signature p {
  display: block;
  margin: 10px 0;
  font-size: 0.8em;
}
#signature .links {
  display: block;
  width: auto;
  height: auto;
  width: 100%;
  margin: 10px 0;
}
#signature .links a {
  width: 100%;
  padding: 0.25em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#signature .links a svg {
  width: auto;
  height: 1em;
}
#signature .links a:hover {
  color: #fff;
  background: #1e4180;
  box-shadow: 0 3px 4px #000;
}
#signature .links a:hover svg {
  fill: #fff;
}
#signature .links ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0.25em 0;
  font-size: 0.8em;
}
#signature .links ul li {
  width: 100%;
  background: #fff;
  color: #333;
  flex: 1;
}
#signature .links ul li:hover {
  background: #1e4180;
}
#signature a {
  color: inherit;
  text-decoration: none;
}
  body {
  background: url(http://repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png) center center/cover fixed no-repeat;
  font-family: 'Helvetica', sans-serif;
  margin: 0;
  overflow: hidden;
  padding: 0;
  perspective-origin: 0 0;
}

/*--Header--*/
header {
  background: linear-gradient(to bottom, #e6e6e6 0%, #a3a3a3 100%);
  display: block;
  font-size: 0.9em;
  height: 1.3em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

header ul {
  margin: 0 5px;
  padding: 0 3px;
}

header li {
  display: inline-block;
  line-height: 1.3em;
  padding: 0 0.5em;
  position: relative;
  cursor: default;
}

header .left {
  float: left;
}

header .right {
  float: right;
}

a {
  color: #000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

header .selected {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5978f5), color-stop(100%, #335ef6));
  color: #fff;
  border-bottom: 0.1em solid #5978F5;
}

/*--Menus--*/
.visible {
  display: block !important;
}

.shortcut:after {
  content: attr(shortcut);
  float: right;
  padding-right: 20px;
}

.search {
  padding: 5px 10px !important;
}

.noChoice {
  color: #adadad;
}
.noChoice:hover {
  background: #fff !important;
  color: #adadad !important;
}

#volume-icon-li {
  width: 1em;
}

.submenu {
  display: none;
}
.submenu input[type="text"] {
  border-radius: 2em;
  border: 1px solid #333;
  height: 2em;
  padding: 0 10px;
}
.submenu input[type="range"] {
  transform: rotate(-90deg);
  margin-left: -50px;
  margin-top: 65px;
}
.submenu ul {
  background: #fff;
  border-radius: 0 0 5px 5px;
  color: #333;
  font-size: 14px;
  left: 0px;
  margin: 0 !important;
  overflow: hidden;
  padding: 0 5px 0 0;
  position: absolute;
  top: 1.3em;
  width: auto;
  white-space: nowrap;
}
.submenu ul.volume {
  height: 10em;
  width: 2em;
  margin: 0;
  padding: 0;
  position: absolute;
  overflow: visible;
}
.submenu ul.volume li {
  margin: 0;
  padding: 0;
}
.submenu ul li {
  display: block !important;
  vertical-align: middle;
  float: none;
  margin-right: 75px;
  font-weight: 400;
  padding: 2.5px 0px 2.5px 15px;
  width: 100%;
}
.submenu ul li.spacer {
  background: rgba(211, 211, 211, 0.8);
  height: 1px !important;
  margin: 2px 0;
  padding: 0;
  width: 102%;
  position: relative;
}
.submenu ul li.spacer:hover {
  background: rgba(211, 211, 211, 0.8);
}
.submenu li:hover:not(.volume) {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5978f5), color-stop(100%, #335ef6));
  color: #fff;
}
.submenu .hasSubMenu:after {
  content: "\f04b";
  font-family: FontAwesome;
  font-size: 0.8em;
  display: inline-block;
  position: absolute;
  right: 25px;
}

/*--Desktop--*/
#Desktop {
  	/*-moz-column-count: 15;
  	-moz-column-gap: 10px;
  	-webkit-column-count: 15;
  	-webkit-column-gap: 10px;
  	-webkit-column-width: 80px;
  	column-count: 15;
  	column-gap: 10px;
  	column-width: 80px;
  	column-fill: balance;
  -moz-column-fill: balance;
  -webkit-column-fill: balance;
  	direction: rtl;*/
  display: flex;
  align-content: right;
  flex-direction: column;
  align-items: flex-end;
  height: 85vh;
  padding: 25px;
  position: absolute;
  right: 0 !important;
  text-align: right;
  z-index: -1;
  width: 100%;
}

#Desktop span.icon {
  display: block;
  float: right;
  margin: 5px 0;
  transition: all 0.2s;
  width: auto;
  z-index: 1;
  text-align: center;
}
#Desktop span.icon:after {
  color: #fff;
  content: attr(data-title);
  display: block;
  margin-bottom: 10px;
  padding: 1px 5px;
  text-shadow: 0px 0px 4px #000;
  transition: all 0.2s;
}

#Desktop span.icon img {
  border: 2px solid rgba(225, 225, 225, 0);
  border-radius: 6px;
  transition: all 0.2s;
  width: 75px;
}

.focus img {
  border: 2px solid rgba(225, 225, 225, 0.5) !important;
  border-radius: 6px;
}

span.focus:after {
  background: #146ece;
  border-radius: 15px;
  text-shadow: none !important;
}

/*--Dock--*/
footer {
  bottom: 0;
  display: inline-block;
  height: 4.4em;
  left: 50%;
  min-width: 35em;
  padding: 0 10px;
  perspective: 1000px;
  position: absolute;
  text-align: center;
  transform: translatex(-50%);
}
footer:before {
  background: linear-gradient(to top, #e6e6e6 0%, #a3a3a3 100%);
  bottom: 0;
  content: '';
  height: 4em;
  left: 0;
  margin-top: 15px;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotatex(45deg);
  width: 100%;
  z-index: -1;
}

footer ul {
  display: inline-block;
  margin: 0 0.1em;
  padding: 0;
  transform-origin: bottom center !important;
}

footer li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  transform: scale(1);
  transform-origin: bottom center;
  transition: transform 2s;
}
footer li:before {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  color: #fff;
  content: attr(data-title);
  display: block;
  float: left;
  font-size: 0.9em;
  left: 50%;
  margin: 2px auto;
  opacity: 0;
  padding: 0 10px;
  position: absolute;
  text-align: center;
  top: -35px;
  transform: translatex(-50%);
  transform-origin: bottom center !important;
  visibility: hidden;
  width: auto;
}
footer li:hover:before {
  opacity: 1;
  top: -45px;
  visibility: visible;
}

.jump {
  -webkit-animation: JUMP 600ms 2 cubic-bezier(0.4, 0.01, 0.6, 0.99);
}

footer img {
  -webkit-box-reflect: below -5px -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(230, 230, 230, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 0 5px;
  position: relative;
  transform: scale(1);
  transform-origin: bottom center !important;
  transition: all 0.2s;
  width: 4em;
}
footer img:hover {
  margin: 0 10px;
  transform: scale(1.2);
}

@-webkit-keyframes JUMP {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 20px;
    padding-bottom: 20px;
  }
  100% {
    bottom: 0;
  }
}

</style>

</head>
<body translate="no">
<header>
<ul class="left">
<li class="apple">
<i class="fa fa-apple"></i>
<div class="submenu">
<ul>
<li>About This Mac</li>
<li>Software Update...</li>
<li>Mac OS X Software...</li>
<li class="spacer"></li>
<li>System Preferences...</li>
<li class="hasSubMenu">Dock</li>
<li class="spacer"></li>
<li class="hasSubMenu">Recent Items</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x2325;&#x2318;&#x238B;">Force Quit...</li>
<li class="spacer"></li>
<li>Sleep</li>
<li>Restart...</li>
<li>Shut Down...</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x21E7;&#x2318;Q">Log Out Jack Harner...</li>
</ul>
</div>
</li>
<li><strong>Finder</strong>
<div class="submenu">
<ul>
<li>About Finder</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x2318;,">Preferences...</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x21E7;&#x2318;&#x232b;">Empty Trash...</li>
<li>Secure Empty Trash...</li>
<li class="spacer"></li>
<li class="hasSubMenu">Services</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x2318;H">Hide Finder</li>
<li class="shortcut" shortcut="&#x2325;&#x2318;H">Hide Others</li>
<li class="noChoice">Show All</li>
</ul>
</div>
</li>
<li>File
<div class="submenu">
<ul>
<li class="shortcut" shortcut="&#x2318;N">New Finder Window</li>
<li class="shortcut" shortcut="&#x21E7;&#x2318;N">New Folder</li>
<li class="shortcut noChoice" shortcut="&#x21E7;&#x2318;N">New Folder With Selection</li>
<li class="shortcut" shortcut="&#x2325;&#x2318;N">New Smart Folder</li>
<li>New Burn Folder</li>
<li class="shortcut noChoice" shortcut="&#x2318;O">Open</li>
<li class="hasSubMenu noChoice">Open With</li>
<li class="shortcut noChoice" shortcut="&#x2318;P">Print</li>
<li class="shortcut noChoice" shortcut="&#x2318;W">Close Window</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x2318;I">Get Info</li>
<li class="spacer"></li>
<li class="noChoice">Compress</li>
<li class="spacer"></li>
<li class="shortcut noChoice" shortcut="&#x2318;D">Duplicate</li>
<li class="shortcut noChoice" shortcut="&#x2318;L">Make Alias</li>
<li class="shortcut noChoice" shortcut="&#x2318;Y">Quick Look</li>
<li class="shortcut noChoice" shortcut="&#x2318;R">Show Original</li>
<li class="shortcut noChoice" shortcut="&#x21E7;&#x2318;P">Add to Dock</li>
<li class="spacer"></li>
<li class="shortcut noChoice" shortcut="&#x2318;&#x232b;">Move to Trash</li>
<li class="shortcut noChoice" shortcut="&#x2318;E">Eject</li>
<li>Burn "Desktop" to Disc...</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x2318;F">Find</li>
</ul>
</div>
</li>
<li>Edit
<div class="submenu">
<ul>
<li class="noChoice shortcut" shortcut="&#x2318;Z">Undo</li>
<li class="noChoice shortcut" shortcut="&#x21E7;&#x2318;Z">Redo</li>
<li class="spacer"></li>
<li class="shortcut" shortcut="&#x2318;X">Cut</li>
<li class="shortcut" shortcut="&#x2318;C">Copy</li>
<li class="shortcut" shortcut="&#x2318;V">Paste</li>
<li class="shortcut" shortcut="&#x2318;A">Se.........完整代码请登录后点击上方下载按钮下载查看
html模仿mac苹果电脑桌面效果

网友评论0

css使用details标签实现水平折叠面板效果代码

svg+css文字排版布局艺术效果代码

div+css布局实现波浪背景动画卡片效果代码

css布局实现砖头墙文字效果代码

div+Css布局实现拟态立体质感checkbox开关切换效果代码

div+Css布局实现checkbox播放与停止播放滑动切换按钮代码

div+css布局实现拍照按钮点击效果代码

div+Css布局耳机盒子效果代码

div+css布局实现立体质感radio播放按键按下切换单选效果代码

css实现div丁字形布局代码
