css绘制一个苹果iphone6手机效果代码-html代码-BFW代码库

css绘制一个苹果iphone6手机效果代码

代码语言：html

代码描述：css绘制一个苹果iphone6手机效果代码

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

<html>

<head>
    <style>
        *, *:after, *:before {
          box-sizing: border-box;
        }
        
        body {
          background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
                background-size: 400% 400%;
                animation: gradientBG 15s ease infinite;
        }
        @keyframes gradientBG {
                0% {
                        background-position: 0% 50%;
                }
                50% {
                        background-position: 100% 50%;
                }
                100% {
                        background-position: 0% 50%;
                }
        }
        .iphone {
          box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
          border: 5px solid #d9dbdc;
          background: #f8f8f8;
          padding: 15px;
          border-radius: 50px;
          height: 877px;
          width: 423px;
          position: relative;
          margin: 30px auto;
          transform: scale(0.8);
        }
        
        .iphone-top {
          padding: 5px 110px 40px;
          position: relative;
        }
        .iphone-top .speaker {
          display: block;
          width: 70px;
          height: 6px;
          margin: 0 auto;
          border-radius: 6px;
          background: #292728;
        }
        .iphone-top .camera {
          display: block;
          margin: 0 auto;
          height: 10px;
          width: 10px;
          border-radius: 50%;
          margin-bottom: 13px;
          background: #333;
        }
        .iphone-top .sensor {
          display: block;
          width: 15px;
          height: 15px;
          float: left;
          background: #333;
          margin-top: -5px;
.........完整代码请登录后点击上方下载按钮下载查看