js+css布局模拟iphone手机交互操作ui效果代码-html代码-BFW代码库

js+css布局模拟iphone手机交互操作ui效果代码

代码语言：html

代码描述：js+css布局模拟iphone手机交互操作ui效果代码，可拍照打开app，gemini3生成。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>iOS Liquid Glass Experience</title>
<style>
    :root {
        --bg-gradient: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        --glass-bg: rgba(255, 255, 255, 0.15);
        --glass-border: rgba(255, 255, 255, 0.2);
        --blur: blur(20px);
        --ios-font: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", sans-serif;
        --island-black: #000;
    }

    * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #1a1a1a;
        font-family: var(--ios-font);
        overflow: hidden;
    }

    /* --- iPhone 机身 --- */
    .iphone-bezel {
        width: 360px;
        height: 740px;
        background: #000;
        border-radius: 50px;
        padding: 12px;
        position: relative;
        box-shadow: 0 0 0 4px #333, 0 20px 50px rgba(0,0,0,0.5);
    }

    .screen {
        width: 100%;
        height: 100%;
        background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop') center/cover;
        border-radius: 40px;
        position: relative;
        overflow: hidden;
        color: white;
    }

    /* --- 动态岛 --- */
    .dynamic-island {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 30px;
        background: var(--island-black);
        border-radius: 20px;
        z-index: 1000;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        overflow: hidden;
    }

    .dynamic-island.active {
        width: 200px;
        height: 50px;
    }
    
    .island-content { opacity: 0; transition: 0.2s; font-size: 12px; display: flex; width: 100%; justify-content: space-between;}
    .dynamic-island.active .island-content { opacity: 1; }

    /* --- 顶部状态栏 --- */
    .status-bar {
        position: absolute;
        top: 12px;
        width: 100%;
        padding: 0 25px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        z-index: 900;
        mix-blend-mode: overlay;
    }

    /* --- 锁屏 --- */
    .lock-screen {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 80px;
        background: inherit;
        z-index: 500;
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        backdrop-filter: blur(0px);
    }
    .lock-screen.unlocked { transform: translateY(-100%); }

    .clock { font-size: 80px; font-weight: 200; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
    .date { font-size: 20px; font-weight: 500; margin-top: -10px; }
    
    .lock-icons {
        position: absolute; bottom: 50px; width: 100%;
        display: flex; justify-content: space-between; padding: 0 40px;
    }
    .circle-btn {
        width: 50px; height: 50px;
        background: rgba(0,0,0,0.4);
        border-radius: 50%;
        display: flex; justify-content: center; align-items: center;
        backdrop-filter: blur(10px);
        cursor: pointer;
        transition: 0.2s;
    }
    .circle-btn:active { transform: scale(1.2); background: rgba(255,255,255,0.2); }

    /* --- 主屏幕 --- */
    .home-screen {
        width: 100%; height: 100%;
        padding: 60px 20px 100px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, auto);
        gap: 15px;
        align-content: start;
.........完整代码请登录后点击上方下载按钮下载查看