HTML5画出iphone6，你敢画ipad吗

2023-12-29 23:10
文章标签 html5 frontend ipad iphone6 敢画

本文主要是介绍HTML5画出iphone6，你敢画ipad吗，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML5已经不是流行的话题了，现在让我们来看看大牛们都利用html5做了什么

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS Only iPhone 6</title><style>/* No images in this pen :D */@font-face {font-family: Helvetica;src: url(https://s3-us-west- 2.amazonaws.com/s.cdpn.io/164210/HelveticaNeue-UltraLight.otf) format('TrueType');font-weight: 300;
}body {font-family: 'Helvetica', sans-serif;background: #f5f5f5;color: #333;letter-spacing: 1px;
}
html,body {height: 100%;margin: 0;padding: 0;overflow: hidden;
}#wrapper {height: 520px;width: 800px;margin-left: -400px;margin-top: -260px;position: absolute;-webkit-perspective: 6000px;perspective: 6000px;top: 50%;left: 50%;
}
#iphone {height: 760px;width: 372px;border-radius: 50px;position: absolute;background: none; box-shadow: none;left: 206px;top: -140px;-webkit-transform: rotateX(54deg) rotateZ(-46deg);transform: rotateX(54deg) rotateZ(-46deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
}
#side {background: #CDD0D5;width: 393px;height: 780px;border-top-left-radius: 77px;border-bottom-left-radius: 49px;border-bottom-right-radius: 86px;border-top-right-radius: 70px;position: absolute;top: 5px;left: -26px;box-shadow: inset #3D3E42 0 0 15px 9px;
}
#front {width: 362px;height: 750px;border-radius: 49px;position: absolute;background-image: -webkit-linear-gradient(-27deg,#444,#000 10%, #000 42%, #333, #000 57%, #000 91%, #444);left: 5px;top: 5px;box-shadow: inset #000 0 0 0 4px, #555 0px 0 3px 0px, #222 -3px 2px, #000 -5px 5px, #E0E0E0 -7px 6px 1px, #6D6D6D -7px 6px 9px;-webkit-transform: translateZ(1px);transform: translateZ(1px);
}
#front-cover {width: 344px;height: 734px;background: #000;border-radius: 39px;position: absolute;top: 8px;left: 9px;
}#home {position: absolute;width: 52px;height: 52px;border-radius: 50%;background: -webkit-linear-gradient(58deg, #666, #000, #666);background: linear-gradient(32deg,#666,#000,#666);top: 684px;left: 160px;
}
#home div {background: #000;border-radius: 50%;width: 46px;height: 46px;position: absolute;left: 3px;top: 3px;
}#camera {width: 11px;height: 11px;background: #000;position: absolute;top: 35px;left: 124px;border-radius: 50%;box-shadow: inset #666 -5px 2px 9px -2px;
}
#camera div {width: 6px;height: 6px;background: -webkit-radial-gradient(#E1E4F5, #0D2B69 33%);background: radial-gradient(#E1E4F5,#0D2B69 33%);background-position: -1px -1px;position: absolute;top: 3px;left: 3px;border-radius: 50%;
}#speaker {width: 50px;height: 4px;border-radius: 2px;background: #555;position: absolute;top: 39px;left: 156px;box-shadow: inset #222 0 0px 4px;
}#volume {height: 128px;width: 11px;border-radius: 10px;position: absolute;background: #F9F9FA;top: 171px;left: -20px;-webkit-transform: rotateY(95deg);transform: rotateY(95deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#volume div {width: 8px;height: 55px;background: #BBBCC0;border-radius: 10px;position: absolute;box-shadow: #eee -1px 1px, #777 -1px 3px,  #505057 -3px 3px, inset #909197 -3px 0 3px;
}#volume div:first-child {top: 2px;left: 4px;
}
#volume div:last-child {top: 69px;left: 4px;
}#toggler {height: 34px;width: 8px;border-radius: 10px;position: absolute;background: #2B2C31;top: 105px;left: -20px;-webkit-transform: rotateY(95deg);transform: rotateY(95deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#toggler div {width: 4px;height: 31px;background: #BBBCC0;border-radius: 10px;position: absolute;box-shadow: #eee -1px 1px, #777 -2px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;top: -1px;left: 3px;
}#aux {width: 19px;height: 19px;background: #3B3B3B;border-radius: 50%;-webkit-transform: rotateX(90deg) translateZ(1px);transform: rotateX(90deg) translateZ(1px);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 766px;left: 45px;box-shadow: inset #000 6px -3px 10px 1px, #C7C7C7 1px 0px 1px;
}#lightning {width: 48px;height: 12px;border-radius: 10px;background: #3F3F3F;-webkit-transform: rotateX(90deg) translate3d(0px,1px,0px);transform: rotateX(90deg) translate3d(0px,1px,0px);top: 771px;position: absolute;left: 139px;box-shadow: inset #8E8F94 -1px 1px 0px 2px, #515258 0px 0px 0 1px, inset #000 0 -3px 10px, #DADADA 1px 0 0 1px;
}#bottom-speaker {position: absolute;-webkit-transform: rotateX(90deg);transform: rotateX(90deg);top: 781px;left: 70px;
}
#bottom-speaker div {width: 8px;height: 8px;border-radius: 50%;background: #6C6D72;position: absolute;box-shadow: inset #000 1px -1px 4px 1px, #DADADA 1px 0px;
}
#bottom-speaker div:nth-child(2) { left: 150px; }
#bottom-speaker div:nth-child(3) { left: 162px; }
#bottom-speaker div:nth-child(4) { left: 174px; }
#bottom-speaker div:nth-child(5) { left: 186px; }
#bottom-speaker div:nth-child(6) { left: 198px; }
#bottom-speaker div:nth-child(7) { left: 210px; }#skrews {position: absolute;top: 780px;left: 120px;-webkit-transform: rotateX(90deg);transform: rotateX(90deg);
}
#skrews div {position: absolute;width: 8px;height: 8px;background: rgb(95, 92, 92);border-radius: 50%;top: 0;z-index: 4;box-shadow: inset #999AA0 0 0 0px 2px, #444 1px 0px;
}#skrews div:last-child {left: 70px;
}#lines {position: absolute;top: 82px;left: -32px;
}
#lines > div:last-child {top: 634px;
}#lines div {width: 7px;height: 11px;position: absolute;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;transform-origin: 100% 100%;
}#lines > div {background: -webkit-linear-gradient(right, #393A3C, #5A595E);background: linear-gradient(right,#393A3C,#5A595E);-webkit-transform: rotateY(90deg);transform: rotateY(90deg);
}
#lines > div > div {background: -webkit-linear-gradient(right, #5A595E, #87868A);background: linear-gradient(right,#5A595E,#87868A);-webkit-transform: rotateY(17deg);transform: rotateY(17deg);left: -6px;
}
#lines > div > div > div {background: -webkit-linear-gradient(right, #87868A, #A8A6AD);background: linear-gradient(right,#87868A,#A8A6AD);-webkit-transform: rotateY(17deg);transform: rotateY(17deg);left: -6px;
}#shadow {width: 350px;height: 755px;background: black;position: absolute;top: 5px;left: 0;-webkit-transform: translateZ(-17px);transform: translateZ(-17px);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;box-shadow: #000 0 0 10px 15px;opacity: 0.4;border-top-left-radius: 76px;border-top-right-radius: 200px;border-bottom-left-radius: 40px;border-bottom-right-radius: 56px;
}#screen {background: -webkit-linear-gradient(#A1E5E5, #1987AA);background: linear-gradient(#A1E5E5,#1987AA);width: 336px;height: 589px;position: absolute;top: 80px;left: 13px;font-weight: 300;color: #fff;background-size: 200% 100%;overflow: hidden;
}#time {font-size: 86px;left: 57px;top: 37px;position: absolute;
}
#date {font-size: 20px;left: 85px;top: 130px;position: absolute;
}#bottom {width: 37px;height: 7px;border-radius: 5px;background: #2AB1DB;position: absolute;top: 573px;left: 149px;
}
#top {width: 37px;height: 7px;border-radius: 5px;background: #D7FFFF;position: absolute;top: 10px;left: 149px;
}
#slide {position: absolute;top: 489px;left: 88px;font-size: 28px;color: #2AB1DB;background: -webkit-linear-gradient(left, #2EC4F3 30%, #fff, #2EC4F3 70%);background: linear-gradient(left,#2EC4F3 30%,#fff,#2EC4F3 70%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 350px;-webkit-animation: slide 5s linear infinite;animation: slide 5s linear infinite;
}@-webkit-keyframes slide {0% { background-position: 100px 0; }40% { background-position: 440px 0; }100% { background-position: 440px 0; }
}@keyframes slide {0% { background-position: 100px 0; }40% { background-position: 440px 0; }100% { background-position: 440px 0; }
}#slide div {-webkit-transform: rotate(135deg);-ms-transform: rotate(135deg);transform: rotate(135deg);border-left: 2px solid #2AB1DB;border-top: 2px solid #2AB1DB;width: 15px;height: 15px;position: absolute;left: -29px;top: 10px;
}#signal {position: absolute;top: 9px;left: 7px;
}
#signal div {width: 6px;height: 6px;border-radius: 50%;background: #fff;border: 1px solid #fff;position: absolute;
}
#signal div:nth-child(2) {left: 9px;
}
#signal div:nth-child(3) {left: 18px;
}
#signal div:nth-child(4) {left: 27px;
}
#signal div:nth-child(5) {left: 36px;background: none;
}#battery {position: absolute;top: 3px;left: 270px;font-size: 13px;
}
#battery > div:last-child {width: 27px;height: 9px;border: 1px solid #fff;position: absolute;top: 4px;left: 27px;border-radius: 2px;
}
#battery div div:first-child {width: 21px;height: 7px;background: #fff;position: absolute;top: 1px;left: 1px;
}
#battery div div:last-child {width: 1px;height: 6px;background: #FFF;position: absolute;left: 29px;top: 2px;border-radius: 0 1px 1px 0;
}#fabrizio {border-top: 100px solid black; border-right: 63px solid transparent;width: 0;-webkit-transform: scale(.33);-ms-transform: scale(.33);transform: scale(.33);-webkit-transform-origin: 0 0;-ms-transform-origin: 0 0;transform-origin: 0 0;margin: 20px;opacity:.6;position: absolute;bottom: -130px;
}
#fabrizio:before {background: black;width: 20px;height: 30px;content: '';display: block;-webkit-transform: skewX(-32deg);-ms-transform: skewX(-32deg);transform: skewX(-32deg);position: relative;top: -65px;left: 29px;
}
#fabrizio:after {background: black;width: 40px;height: 36px;content: '';display: block;-webkit-transform: skewX(-32deg);-ms-transform: skewX(-32deg);transform: skewX(-32deg);position: relative;top: -130px;left: 49px;
}#circle {width: 50px;height: 50px;background: none;border-radius: 50%;box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 50px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px;-webkit-animation: circle 30s linear infinite alternate;animation: circle 30s linear infinite alternate;
}@-webkit-keyframes circle {0%{box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;}100%{box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;}
}@keyframes circle {0%{box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;}100%{box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;}
}#reminder {position: absolute;
top: 230px;
left: 40px;
width: 296px;
height: 50px;
border-top: 1px solid #86E2F0;
border-bottom: 1px solid #86E2F0;
line-height: 50px;
font-weight: 400;opacity: 0;-webkit-animation: reminder .1s linear forwards 15s;animation: reminder .1s linear forwards 15s;
}
#reminder div:first-child {background: #fff;width: 16px;height: 16px;border-radius: 3px;position: absolute;top: 18px;
}
#reminder div:nth-child(2) {position: absolute;left: 30px;
}
#reminder div:last-child{position: absolute;
left: 251px;
font-size: 11px;color: #86E2F0;
}@-webkit-keyframes reminder {100% {opacity: 1;}
}@keyframes reminder {100% {opacity: 1;}
} #awwwards {position: absolute;bottom: 30px;left: 70px;
}
#awwwards a {color: #444;text-decoration: none;border-bottom: 1px solid #888;
}#coolors {position: absolute;bottom: 30px;right: 30px;color: #444;text-decoration: none;border-bottom: 1px solid #888;-webkit-animation: coolors 1s infinite;animation: coolors 1s infinite;opacity: 1;
}
@-webkit-keyframes coolors {50% { right: 40px; }
}
@keyframes coolors {50% { right: 40px; }
}</style><script>window.console = window.console || function(t) {};window.open = function(){ console.log('window.open is disabled.'); };window.print = function(){ console.log('window.print is disabled.'); };// Support hover state for mobile.if (false) {window.ontouchstart = function(){};}</script></head><body><div id="wrapper"><div id="iphone"><div id="side"></div><div id="lines"><div><div><div></div></div></div><div><div><div></div></div></div></div><div id="toggler"><div></div></div><div id="aux"></div><div id="lightning"></div><div id="bottom-speaker"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div id="skrews"><div></div><div></div></div><div id="volume"><div></div><div></div></div><div id="front"><div id="front-cover"></div><div id="camera"><div></div></div><div id="speaker"></div><div id="screen"><div id="reminder"><div></div><div>Made by @_fbrz</div><div>now</div></div><div id="circle"></div><div id="time">12:42</div><div id="date">Saturday, January 4</div><div id="bottom"></div><div id="top"></div><div id="slide"><div></div>slide to unlock</div><div id="signal"><div></div><div></div><div></div><div></div><div></div></div><div id="battery"><div>86%</div><div><div></div><div></div></div></div></div><div id="home"><div></div></div></div><div id="shadow"></div></div>
</div><script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script><script>if (document.location.search.match(/type=embed/gi)) {window.parent.postMessage('resize', "*");}</script><script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script><script>//You may also like Plugin
/*alsolike("LwlqI", "100 followers jelly cake!","nKCsI", "Semantic Sandwich","whxbF", "CSS Only Bending Effect" 
);*///@ sourceURL=pen.js</script></body></html>

运行起来简直逼真，好了，送你一个iphone吧，不客气。
效果图如下：

好大一只iphone
如需转载，请标明本文链接。谢谢

这篇关于HTML5画出iphone6，你敢画ipad吗的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/551003。

相关文章

CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2