基于CSS3的苹果套件
来源：互联网 发布：photoshop cc mac补丁 编辑：程序博客网 时间：2024/05/01 12:49
<!DOCTYPE html><html><head><meta charset="utf8"><title>MAC</title><style type="text/css">*{margin: 0;padding: 0;}body{min-width: 1580px;width: 100%;height: 100%;text-align: center; background-color: #282828; background-image: -webkit-radial-gradient(black 15%, transparent 16%), -webkit-radial-gradient(black 15%, transparent 16%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);background-image: radial-gradient(black 15%, transparent 16%), radial-gradient(black 15%, transparent 16%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;background-size: 16px 16px;}.board{display: inline-block;width: 600px;height: 450px;position: relative;background: rgba(250,250,250,1);background-image: linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));background-image: -webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));box-shadow: 0px 3px 3px rgba(0,0,0,0.9);border:1px solid #ccc;border-radius: 20px;margin: 80px auto;}.board:before{content: '';width: 735px;height: 20px;position: absolute;top:-20px;left: -66.5px;background: rgb(210,210,210);border-radius: 0px 0px 3px 3px;border-top-left-radius: 390px 18px;border-top-right-radius: 390px 18px;border-bottom: 2px solid rgba(0,0,0,0.9);background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));background:linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));box-shadow: inset 0px 5px 3px rgb(160,160,160);}.board:after{content: '';position: absolute;display: block;width: 96px;height: 5px;bottom:0;left: 252px;background: rgb(210,210,210);border-top-left-radius: 96px 40px;border-top-right-radius: 96px 40px;background:-webkit-linear-gradient(top,#c1c0c6 90%,#fff 95%,#747474);background:linear-gradient(top,#c1c0c6 90%,#fff 95%,#747474);box-shadow: inset 0px 5px 3px rgb(160,160,160);}.blackbar{margin-top: 2px;width: 450px;height: 18px;left: 75px;position: absolute;border-radius: 2px;border-bottom: 2px solid #ccc;border-right: 2px solid #ccc;background: -webkit-linear-gradient(to bottom,#161719 ,#151517 20%,#000 15%,#161719);background: linear-gradient(to bottom,#161719 ,#151517 20%,#000 15%,#161719);}.keyboard{position: absolute;width:537px;height: 216px;left: 31.5px;top: 35px;border: 1px solid rgb(180,180,180);border-radius: 8px;background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));background:linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));box-shadow:-2px 0px 2px rgb(180,180,180) inset,0px -3px 3px rgb(180,180,180) inset,2px 0px 2px rgb(180,180,180) inset,0px 2px 2px #fff inset;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}ul{width: 530px;padding: 0px 8px 8px;margin-top: 8px;margin-left: 5px;list-style: none;}li{width:29px;height:29px;float: left;margin-right: 5px;margin-bottom: 5px;background-color: rgb(30,30,30);color: rgb(200,200,200);text-align: center;vertical-align: middle;line-height: 29px;font-size: 8px;border-radius: 4px;border: 1px solid rgb(70,70,70);box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0);}li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),li:nth-child(13),li:nth-child(14){width:30px;height:15px;line-height: 15px;vertical-align: middle;}li:nth-child(15) span,li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18) span,li:nth-child(19) span,li:nth-child(20) span,li:nth-child(21) span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24) span,li:nth-child(25) span,li:nth-child(26) span,li:nth-child(27) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,li:nth-child(43) span,li:nth-child(53) span,li:nth-child(54) span,li:nth-child(55) span,li:nth-child(64) span,li:nth-child(65) span,li:nth-child(66) span,li:nth-child(70) span,li:nth-child(74) span{display: block;width: 100%;float: left;height: 50%;font-size: 5px;line-height: 14.5px;}li:nth-child(43) span{font-size: 6px;line-height: 14.5px;text-align: left;padding-left: 2px;}li:nth-child(55) span{float: right;font-size: 6px;line-height: 14.5px;text-align: right;padding-right: 2px;}li:nth-child(28),li:nth-child(29){width:45px;}li:nth-child(43),li:nth-child(55){width:55px;}li:nth-child(56),li:nth-child(67){width:73px;}li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),li:nth-child(72),li:nth-child(73),li:nth-child(74){height:33px;line-height: 33px;font-size: 5px;}li:nth-child(72){width:173px;}li:nth-child(71),li:nth-child(73){width:37px;}li:last-child{background: none;border:none;width: 104px;height: 36px;box-shadow: none;border-radius: none;}li:last-child .direction{position: relative;top: -2px;height: 100%;}li:last-child .direction .btn{float: left;margin-right: 3px;position: relative;height: 100%;width: 30%;}.left,.up,.down,.right{height: 14px;width: 29px;background-color: #1E1E1E;color: #C8C8C8;text-align: center;line-height: 14px;font-size: 12px;border-radius: 4px;border: 1px solid #464646;box-shadow: 1px 0px 0px #000, 0px 1px 0px #000, -1px 0px 0px #000, 0px -1px 0px #000;}.left,.right{position: absolute;bottom: 0;}.left>span{transform:rotate(270deg);display: block;}.right>span{transform:rotate(90deg);display: block;}.up{margin-bottom: 4.2px;}.touch{position: absolute;width:204px;height:150px;border: 1px solid #c6c6c8;bottom: 23px;left: 198px;border-radius: 8px;}.virtual,.mouse-pad{display: inline-block;width: 290px;height:290px;background: #ba8455;background: linear-gradient(45deg,#cb8d66,#bb7c50);border: 1px solid rgba(166,137,121,0.8);border-radius: 10px;position: relative;top: -100px;left:70px;box-shadow: 0px 3px 3px rgba(0,0,0,0.9),inset 0 0 3px 2px rgba(166,137,121,0.8);}.mouse{width: 96px;height: 180px;background: #fff;background: linear-gradient(160deg,rgb(253,253,251) 0%,#f0f4f7 45%,#dbdfe2 60%,#ada49f 100%);position: absolute;right:50px;top: 50px;border: 1px solid rgba(171,147,145,0.8);border-top-right-radius: 70px;border-top-left-radius: 70px;border-bottom-right-radius: 90px;border-bottom-left-radius: 90px;box-shadow: 0px 3px 7px rgba(122,47,38,0.9),inset 0px -3px 3px 2px rgba(171,147,145,0.8);}.virtual{background: transparent;border: none;box-shadow: none;}.iphone{height: 326px;width: 160px;border: 1px solid rgba(153,105,105,.8);border-radius: 26.8px/29px;background: #b98b8e;background: linear-gradient(to bottom,#4d3438 0%,#8d6563 2%,#a57875 10%,#f6cfc8,#b98d8e 90%,#4d3438 100%);box-shadow: 0px 3px 7px rgba(0,0,0,0.9);content: "";margin-left: 50px;margin-top: -50px;position: relative;left:13%;top:-280px;transform:rotateZ(-40deg);}.iphone-inner{/*边框为2px*/margin-left: 20px;height: 320px;width: 156px;border: 1px solid #ae9495;border-radius: 26.8px/29px;background: #e5e3e8;background: linear-gradient(to bottom,#e6e5ea 0%,#c6c5cb 40%,#e2e0e5 100%);margin: 2px auto;}.iphone-row-1{height: 37.3px;width: 100%;text-align: center;}.sensor{width: 4px;height: 4px;background: #131114;border: 1px solid #e8e6e9;border-radius: 3px;margin: 3px auto;margin-bottom: 0px;}.sensor-group{height: 9px;width: 100%;text-align: center;line-height: 9px;}.earphone{width: 50px;height: 3px;background: #131114;border: 1px solid #e8e6e9;border-radius: 4px;vertical-align: middle;display: inline-block;position: relative;}.earphone:before{width: 6px;height: 6px;background: #131114;border: 1px solid #e8e6e9;border-radius: 4px;position: absolute;content: "";top: -2.5px;left:-15px;}.iphone-row-2{height: 246px;width: 95%;margin: auto;background: #000;border: 1px solid #e8e6e9;}.iphone-row-3{width: 100%;height: 34px;position: relative;}.iphone-row-3 .btn{height: 23px;width: 23px;line-height: 23px;border-radius: 14px;background: #382828;background:linear-gradient(to bottom,#030000,#060300 40%,#483f42 50%,#030000 60%,#020005);margin: 3.5px auto;position: relative;box-shadow: 0px 0.4px 0px 1.8px rgba(244,236,234,0.8);}.iphone-row-3 .btn:before{height: 4px;width: 7px;transform:rotateZ(135deg);border-radius: 14px;background: #f4ecea;background: linear-gradient(to right,#e8e2d6,#fefcf0,#e8e2d6);position: absolute;top: 5px;right: 0.2px;content: "";}.btn-inner{height: 21px;width: 21px;border-radius: 14px;background: #d5d4d9;background: radial-gradient(circle at center,#d9d8dd,#d5d4d9,#ccc7cb);margin-top: 0.2px;position: absolute;left: 0;top: 1px;right: 0;margin: auto;z-index: 99999;}.outter-btn{width: 10px;height: 25px;border: 0.2px solid rgba(153,105,105,.8);border-radius: 2px;background: #b98b8e;background: linear-gradient(to left,#a57875 0%,#f6cfc8,#b98d8e 80%,#cfc1c0 98%);box-shadow: inset 1px 0px 1px 1px rgba(205,195,194,0.8);}.outter-btn.btn1{height: 20px;position: absolute;top:50px;left:-3px;z-index: -1;}.outter-btn.btn2{height: 38px;position: absolute;top:80px;left:-3px;z-index: -1;background: linear-gradient(to left,#a57875 0%,#f6cfc8,#b98d8e 80%,rgba(234,199,197,0.8) 100%);box-shadow: inset 1px 0px 1px 1px rgba(234,199,197,0.8);}.outter-btn.btn3{height: 38px;position: absolute;top:135px;left:-3px;z-index: -1;background: linear-gradient(to left,#a57875 0%,#f6cfc8,#b98d8e 80%,rgba(234,199,197,0.8) 100%);box-shadow: inset 1px 0px 1px 1px rgba(234,199,197,0.8);}.outter-btn.btn4{height: 38px;position: absolute;top:80px;right:-3px;z-index: -1;background: linear-gradient(to left,#a57875 0%,#f6cfc8,#b98d8e 80%,rgba(234,199,197,0.8) 100%);box-shadow: inset 1px 0px 1px 1px rgba(234,199,197,0.8);}</style></head><body><div class="virtual"></div><div class="board"><div class="blackbar"></div><div class="keyboard"><ul><li>esc</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><span>~</span><span>`</span></li><li><span>!</span><span>1</span></li><li><span>@</span><span>2</span></li><li><span>#</span><span>3</span></li><li><span>$</span><span>4</span></li><li><span>%</span><span>5</span></li><li><span>^</span><span>6</span></li><li><span>&</span><span>7</span></li><li><span>*</span><span>8</span></li><li><span>(</span><span>9</span></li><li><span>)</span><span>0</span></li><li><span>—</span><span>-</span></li><li><span>+</span><span>=</span></li><li>delete</li><li>tab</li><li>Q</li><li>W</li><li>E</li><li>R</li><li>T</li><li>Y</li><li>U</li><li>I</li><li>O</li><li>P</li><li><span>{</span><span>[</span></li><li><span>}</span><span>]</span></li><li><span>|</span><span>\</span></li><li><span>.</span><span>cops lock</span></li><li>A</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li><li>J</li><li>K</li><li>L</li><li><span>:</span><span>;</span></li><li><span>"</span><span>'</span></li><li><span>enter</span><span>return</span></li><li>shift</li><li>Z</li><li>X</li><li>C</li><li>V</li><li>B</li><li>N</li><li>M</li><li><span><</span><span>,</span></li><li><span>></span><span>.</span></li><li><span>?</span><span>/</span></li><li>shift</li><li>fn</li><li>control</li><li><span>alt</span><span>option</span></li><li></li><li>By Pure CSS.To Be Continued.</li><li></li><li><span>alt</span><span>option</span></li><li><div class="direction"><div class="btn"><div class="left"><span>▲</span></div></div><div class="btn center"><div class="up">▲</div><div class="down">▼</div></div><div class="btn"><div class="right"><span>▲</span></div></div></div></li></ul></div><div class="touch"></div></div><div class="mouse-pad"><div class="mouse"></div></div><div class="iphone"><div class="iphone-inner"><div class="iphone-row-1"><div class="sensor"></div><div class="sensor-group"><div class="earphone"></div></div></div><div class="iphone-row-2"></div><div class="iphone-row-3"><div class="btn"></div><div class="btn-inner"></div></div></div><div class="outter-btn btn1"></div><div class="outter-btn btn2"></div><div class="outter-btn btn3"></div><div class="outter-btn btn4"></div></div></body></html> 0 0
- 基于CSS3的苹果套件
- 基于CC2430的Zigbee开发套件【转】
- 基于XMPP Protocol的开源套件
- 基于redhat的rhcs套件搭建
- Oracle SOA套件:集成的基于标准的平台
- 用于构建基于原子处理器的应用程序的“甜蜜”套件
- ESimple基于开源软件的Web应用开发套件
- 基于云计算的HTML5技术开发应用套件SALAMA
- 苹果基于数据的决策
- 苹果对非苹果用户免费开放iCloud套件服务
- 用CSS3实现类似苹果桌面的有趣抖动效果
- CSS3实现的苹果网站搜索框效果
- CSS3制作苹果手机的Message图标，超强大
- CSS3 Region：基于HTML和CSS3的富页面布局
- CSS3 Animation 基于 less 构建的 css3 动画库
- CSS3 Region：基于HTML和CSS3的富页面布局
- 基于js和css3的缓冲图标
- 基于CSS3的自适应布局技术
- 初识体系结构
- css：-webkit-overflow-scrolling: touch;
- 一张图简单了解HTML5
- 网络基础之网络参考模型 + 网络协议
- 三色排序问题/(荷兰国旗问题)(C++版)
- 基于CSS3的苹果套件
- grub 解析
- 1087. All Roads Lead to Rome (30)
- 50道Java线程面试题
- 杭电ACM1248（完全背包）
- 标记文件
- Linux进程间通信(IPC)编程实践（八）共享内存的使用-POSIX 共享内存（API）
- Bmob文档阅读1-快速接入
- web入门第七八天
