文章详情
html+css写的iphone手机模型
Posted on 2023-10-20 11:45:26 by 主打一个C++
效果：
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone 模型框架</title>
<style>
body {
height: 100%;
height: 100%;
margin: 0;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
.iphone {
position: relative;
width: 376px;
/* iPhone 宽度 */
height: 648px;
/* iPhone 高度 */
border: 16px solid #120f0f;
/* 手机边框 */
border-radius: 40px;
/* 边角圆润 */
background: #fff;
/* 手机背景色 */
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
/* 阴影效果 */
margin: 0;
padding: 0;
background-color: #EEEEEE;
border-top-width: 90px;
border-bottom-width: 110px;
border-left-width: 30px;
border-right-width: 30px;
}
.iphone .iphone-box {
position: absolute;
left: -20px;
top: -80px;
width: 376px;
/* iPhone 宽度 */
height: 648px;
/* iPhone 高度 */
border: 16px solid #000;
/* 手机边框 */
border-radius: 40px;
/* 边角圆润 */
background: transparent;
/* 手机背景色 */
box-shadow: 0 0 10px rgba(222, 222, 222, 0.5);
/* 阴影效果 */
margin: 0;
padding: 0;
border-top-width: 80px;
border-bottom-width: 100px;
border-left-width: 20px;
border-right-width: 20px;
}
/* 听筒 */
.iphone .receiver{
position: absolute;
top: -48px;
left: calc(50% - 42px);
width: 84px;
height: 8px;
background-color: #444;
border-radius: 4px;
}
/* 摄像头 */
.iphone .camera {
position: absolute;
top: -51px;
left: calc(50% - 85px);
width: 14px;
height: 14px;
background-color: #EE0000;
border-radius: 7px;
animation: camera 1.5s infinite alternate;
}
@keyframes camera {
0% {
background-color: #000088;
}
50% {
background-color: #00EE00;
}
100% {
background-color: #000088;
}
}
.iphone .home-button {
position: absolute;
bottom: -84px;
left: calc(50% - 30px);
width: 60px;
height: 60px;
border: 1px solid #444;
border-radius: 50%;
background-color: #001;
box-shadow: 0 0 10px #333;
}
.iphone .home-button:hover{
box-shadow: 0 0 20px #FFFF00;
}
/* 设置按钮定时动画 */
.iphone .home-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
animation: button-pulse 2s infinite;
}
@keyframes button-pulse {
0% {
box-shadow: 0 0 5px #FFFFFF;
}
50% {
box-shadow: 0 0 20px #FFFFFF;
}
100% {
box-shadow: 0 0 5px #FFFFFF;
}
}
.iphone .volume-up {
position: absolute;
width: 6px;
height: 60px;
background-color: #000;
left: -34px;
border: 1px solid #000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
top: 10%;
}
.iphone .volume-down{
position: absolute;
width: 6px;
height: 60px;
background-color: #000;
left: -34px;
border: 1px solid #000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
top: calc(10% + 80px);
}
.iphone .power{
position: absolute;
width: 6px;
height: 90px;
background-color: #000;
right: -34px;
border: 1px solid #000;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
top: calc(10% + 20px);
}
.screen {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
border: 0px solid #000000;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAPH0lEQVR4nL1ae4hc1Rn/zsyd185rN/uKiYlNoqlmU9Am+UOwGispPvpPW6SFWqSIVAqCjSAlWFpo/9NiqRaV2qqklPqgrRIp9UUtEtA2bVGMmqzvmuxrdmd3Z3fmPuaccu89j++ce+5MZgte2J259557zvl+3+/7fd85dwikHK7rAmMsvskYxF8ZUP4ZXYtvRecsOmeybfwd4j4Yv08AWNyBuh6e0PjZuD8at2ViGArPPPvsHePj49+qVaufy+VyhV0X7hrhj4cd8rHjyVCmxmV8XuH1PVNTVkOdNACCIOAAhB0QoKAMiQ0GYyAEhJgEMHWNcgCxwQwDyZQBkV0Unn/+hUd27NzxjeuuvXZY9Hn6vemm7/lyTEYx8LxfGo+kwE+zshcAvg/xXOOBgYiOkxPXvMm4kZFnQLWjVGOF9Fp0HaTXw6tPP/30Fbt27nz04MGDF4bnHjc4bBDOy/M8bhQFShVwYnzZl2RHOgKpAPhBEE2WAg1tR/REVBNeQFRUoCnPUMwWRpHH4z6jKzTu64UXX/jZ5ZdfftfY6GjO812dPYzC2ZmZt7du3aoMjDyuwAuBBuQYhlg1GAAhA0xvicGAAp9z5AUVs2kUF2GAtQTdo/H948ePP3fll668HiKve8iTLAYYABoLC8c814vmQJliGkNjMtwvZ98GAPAsFE6hOB4UCZ80EtMSqGQMlc8DvPTySz+6+uDV13ueq4UXFR6lDFprLbq0tPS467kJiksWRHRhEpxoDnQDDAjjTld000gTABvFOQURxaMzU0sogwu2b78zNgwJFw8PwZBTp06fPHTo0KchAygSOQ1oLoCRNCCnbYwBFJDqI4WPtIsaHhfGYaBw/DINFIYm/tprrx09cOBA3XNdGWaUq3nMuLjf2dmZ3+zctYOHGHABFDoAsh1mKaUy9wwIAFdaDV2ZeqgGiIwzzpZU6lP9mlDxyc2bv+5y46Xn+DNCT06dmp7et2//L7yOq7GQcgYBBpXPhwoh3kgIuK6nPMe9KDyToJ2mxFT/zpQnmYh7UJ55/fXX7z+wb/9QJGwohGhMv2icleZy8PHHH31327at0tORDkchwkOPqvZmaGwoC7iepxQ2Yaih7BArPxUGIAFiViYI7wIMlcqHOmHsU5UWhW7EwFF4591379+/f/+rIUsotYcS47mWyjlTlQXYBkLA44KkjOQDy/hUOV9cZ3wCgOMxvEaR12X6iwGq12u7BK2pSJMSSAZvvPnmfVNTew6HbSSlkadlJqCIfZitdKMMcONUE85aGixiXMu5go4WiouURJOaICheKBScyLPafQpzs3OLs7OzD+6ZmrrbjcKDSlEWz2JmmmNQUTuIsQZmgOsiZDmifSmuT0qFhW6cljapUvHQZwsLjdX5+fk/7d590c3VWhXcyPPCYLxYUsyk1j5xGGyAAZ2OG30Ko0FDH+SgOh1NQ8Fog6u2eHJzc3MNz/NWXM+bXVtbe+ySiy9+uDw0FI2P+1Jj8tQoKlIKetynzGNgAFxebmqxZeiBNC7ifZzS/nnixKX5fP6L3W6wxhhMM8be3vuFvesxG1RxE2kGZVCt1cYACVmn00ElNYVT06cvA8jckCEwSbKZ8QzJjHa73Xnf9086jnPv1vO2dJiRoQTAQnvYhipBtyMnpSu+/vnGm2/cVK/Xj1QrlR2lUqmwd2qK6NUfgzOfnmksLy//pdPpPPL53btfEatCaoYA99h7779/pFgoXDdULl+27fxtZaalN5FCGdBu96dnZs6eWm+vP79l85bbAVBYUp2daUfqhsgD9//SUFZOXU6zt06+dVO1WjuyZcuWS1QRwukmvcFTGmWSwvPz8/9dbbWe2r59+2Ew6PrxJ588XK1Wb6xVKyNCaKPnRElLmV7tido/rBVarebq6uqvJicm7tZCgPfz+NGjVjtTAfj5PfdYxS1E9MMPP3px+/bzr8EbD6rKE3U+lcKp5XceNq7rdtfWWguu532azxd2lgrFWjbnZBgKp1SBtaRn8beysvLBert9+9jo2HNipRp2+cSTTw4WApH6ApMICyo1FhpzmycnxmVeThUfJJjaZojcxMgWS0OThUJxMm7bhaAT6NqSZqwQUan66l4+l9tBGX1qZnbmqpF6/R+iVE870rOA29FTC6PhHgEdKpdJVCMgJWeoHMXFh4pte5ma7lWjApUGKo8KfVGgqNQHlJVyjvPXuYWFfbVq9YNeGtAjC3S0NfXy0vJCtV4l4Ae8skIU5yszPcerYiVhrDSS6Ybiexq9zfzO5EoQb8JQpm27jWQIOd5oNC6qlMutDQDgybJ2Zm7m2PjY+GgYFokaPM2LKTVBYhsLeVGr5kDVDCDLZK4PTIijhS2IZa7r/j2fy7fileaAAIT5OOxoZnb2gYnx8RvENrkykhqCh76j2FRltLk1ho3kWgE6aKL6w0DLtYhmrNgfBNm3H3j3ZTPZwyGTex191gIMcrnct6XxFA2CYjK+B8izJsVNwUIlqkxnSSZpa3xzEzQBrFhfEAi6wX0ZQg53g67cXttACLiw0Fi4Y9PIpmG3gwRRVIcmrQ2Kq8pP95jyINU2XbVNUlRhChVPAwcwQ+JnnwTGDgeyrXg/MSgAnQ4QILfE3sfFkKI+XhozxtQGimWiDE2IxgsLtIQGC0CqT7EvYANCKHwIFiHwHqX0m2ouai0yMABnZma2Dtdqe3DKwwsSW762GSupKpasoOp+MF6FaRulRoxLhUcbqngHKjyyjvOTQGynGy9tBgaAALnZ94OMlmsTu7BmKCCvyW1v3UhNxY1tNd04neKAjebrewFoeD2bzb7tra3/TpsreuM0MACM0a/ELyeSHmJoYE2h0aBquQxJbyHhwsWS9mpLCy3xNgr0HWp+PfwjmeyxaCdb7IIbb6AGBqDb7U6JndUkte0UxwygFHtAeAFPXmgA9PA4KqgAvXEW+5Cg1vqut3KXsJ4SBYzIWgMDEPj+KPD9f80QMBchutcAp0RhEOiKD8iDggGSFeJc61+ww2AKn1c+l28EgQ+KLGr7DiT4AwLgex6hyAvCULX3T9U5N07uAWAxk86gGmUVkHzS6DcCcjcat0dVI0g2xWHlOLnlgOd8CmieyCkDAxBviwtPgkZvPf1QORmTKZjigCYv3wkaQMl+Eiqu6B/dI7qXKWONwA/iV/joedAAG5QBvq8pN8OUMihuftcobnpDUJwgBuAJIzAwuxiJswQQtT4Qz9Bul3a7gdIZYUQv7vcFAP0KQ74JBuU1TFHMCIk6Bb4rhADCRoFiU2gVQ1QXntT7BAmk7IeLXbcbDFP0Chybnbrj0w+AIAgYY5Son8bolBIvH5V3QWMLDh8QIoiNQWkwuk1EbBAtbhUjLMbIqGBVFt21e3xDawHKqBcEfkF6wqApyHwrpStBewAUEqDahrfFdJWuKCNZwlgiqa3ux99IXBANERU4CaB6saAHAGzV94MCFiR5GIUIQwao/C3SF+E+ZdJjBEB7YU2MT9WTuMb4p/KyAD280mmvDw+Pjl7RbCy+SjS+/B8aAIwtBkEwJgekym1iB0ZGMgNppK47ofFUaJfVO6bBpvHMMFs/iASCBsEPGbCvEtRDv/HCI9NjMmfD9XT4F/jdsDKMv0fXAqC0C92wUow2M1R9r0yPpwcWXzB5HxCR1XMgKQ7yPzGYIvoX39sd95qx8fG9jPd3Lsb3BCCTyfy5S7uRgZQbKEpUZRpYh5Hx3UeRGfpGkNEg8w0+A6OF3pvndortdvsZMGYHfQKhFwOewJ4j6rp2lSTEKf3AgNgorhutTFFtdB6Z4K61Wjtr9frf8Bj9VCAVgGajcbZQKjXBoDDRjFSeSUZnuhoTo0/zHlgoLsIkzShxbWV5+arh4eFHVB+9AyEVgPDI5XLTtg5MT+sT1SdEtOfs01FGYa1PDxjzjBnANZvNW4ZHRh4SbO0FQa8QgJyT+6NJNThHT4IVDGbcsxupJ7r0sdOOCISlpe/VarV/jU9OXtArDFL7yfLPfKHQ9l2vmIxO0zjdjH7AJDVDfyIN9OTzSXXAPYXzL5fLjy0sLn7fZmePEIi7LhSK/2aI4vgwQyG1ZD0no9IyvQqJNNb0Gtdz3VJrdfXWNCtTARDD5fO5R+0TMqdhA4MY5/r9tD5sfanwYdY2+hj6nVK5fCzNzp4iCPGPk39dGhqatU0U+oQAIOYQJIBmW1wYJQ+iAW6KnxpLlU4mY7PZ7B82BIDovFgsPpxmrNkeH58FxVU/ydI3PA+d12w0nkh7rmcWEJ01Fxd/XBwqzwJCnaHylKBz01NMI6/ZN0HnSe23hRoxvmMmKjlUrULn9UqE2V438ODVarXqtttXYRqb+VdNyl4e28IgLZXaiySSYAMznsH9ht5vraxEC6S0Xwr21QBxhCwoV6vv4OF75XzdcFXq2o5zozjI2DbHtBkf0b9UurdfOdw3BAiidrFYvC3rOF1siggHHYTkRE2PgcXTJgh2iust7RmJQFgELTYW7zX7PGcAVGdKmhrz86+UK5U/meWLra5Lq/NtQNiexe1shZUJMj7y+ZxXKBa/Q+R2zAYOx/jLgvqslctnsgAs/HP4Hz63faZdM/uwtXGMdubzej+EjY2MPITnmyp0/UIAUiieLxZ/kM1mGW77WVOcGG3EUalW/tNcWrqNJHqxH6ngZCzFifjeabffqtbrl7qdzsUkheI2Y5UB6SoOKc+AMY4aT1G8WCyuOPn8pV70e1v9SAuDPoUQMc6VkavN5tcq1doJhuIUG2NO1mzDDOUwVYQY/YGVCWqWmUyGlSuVO1ebzWZy7r1kMOUw4x7HUxbpQ61SedeM5bSY1eOaWGM9PifyM01XHKP96MjIg44xz3PRgFRosj0amLQtVyrT663WLny/F8VDbxWKxYVsJrOayWSaDKAd/q6PUVqnlJY77fYwnmLaUjz6TghUarVXVpaXDwLaojPbBj1AsB4xekTzetaSHQTKm4aHf5/PZmlSnYn8PlQsrY6OjBw1mWV6bWJs7KZ6pXIyl8lQW5YRXq8ODc1OjI3dGs7TZKjJgrSjBwMwmjqySUGL/TsyOnpjEAQ3+76/3+t0JrKO4+fy+bOO45xwnNxvGwvzz9lrBVUiY/9tGh09j1J6JAiCLwe+v833vIqTy7n5fP604zgvLy0t3aFnEbUSVNd6MAAA/geSlK3+bdAIzAAAAABJRU5ErkJggg==) no-repeat center center;
background-size: 64px 64px;
/* background-position: center; */
}
iframe {
margin: 0;
padding: 0;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
border: 0px solid #444;
}
</style>
</head>
<body>
<div class="iphone">
<div class="iphone-box">
<div class="receiver"></div>
<div class="camera"></div>
<div class="volume-up"></div>
<div class="volume-down"></div>
<div class="power"></div>
<a href="https://cpp.vin" class="home-button"></a>
<div class="screen">
<iframe src="https://cpp.vin" frameborder="0"></iframe>
</div>
</div>
</div>
</body>
</html>*转载请注明出处：原文链接：https://cpp.vin/page/62.html
