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;
          border-radius: 50%;
        }
        
        .top-bar, .bottom-bar {
          display: block;
          width: 423px;
          height: 15px;
          border-left: 5px solid #BBB;
          border-right: 5px solid #BBB;
          position: absolute;
          left: -5px;
        }
        
        .top-bar {
          top: 65px;
        }
        
        .bottom-bar {
          bottom: 65px;
        }
        
        .iphone-screen {
          background: #eee;
          border: 1px solid #fff;
          height: 677px;
          width: 375px;
          margin: 0 auto;
          border: 2px solid rgba(0, 0, 0, 0.9);
          border-radius: 3px;
          overflow: hidden;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/628edfdbc3696.png");
          background-size: cover;
          back.........完整代码请登录后点击上方下载按钮下载查看