CSS 复刻 iPhone14，并接到了优弧的电话😏，还不快接电话？-六虎

我正在参与「码上挑战赛」概况请看：码上挑战赛来了！

前语

最近 iPhone14 上市新增了一个所谓的 “灵动岛” 的功能，我看着我手里上个月才刚买的 iPhone13，想了一下，还能再战5年，不过在看 apple 官网的视频介绍中，关于 iPhone14 的 “灵动岛” 作用还挺有趣，今日咱们就来复刻一下 iPhone14 中 “灵动岛” 的作用。老规矩，咱们先来看一下终究完成的作用，如下所示：

当咱们将鼠标移入手机时，屏幕会变亮，而且会收到优弧打来的电话，点击顶部的 “灵动岛” ，它会打开并展示两个按钮及左侧打电话的人；当鼠标再次点击时，“灵动岛” 会收起来，移出手机后，屏幕会变黑。下面咱们就一同来盘一下这个作用。

iPhone14 外观

首要咱们先把 iPhone14 的外观画出来，咱们先来看一下相关的 html，代码如下：

<div class="box">
    <div class="inner"></div>
    <i class="btn btn1"></i>
    <i class="btn btn2"></i>
    <i class="btn btn3"></i>
    <i class="rightSldeBtn"></i>
</div>

最外层的 box 便是整个手机的 ”壳“，里边又包含了 ”屏幕“、”声音按键“、”开机键“ 等功能，接下来咱们一同来看一下如何通过 CSS 将 iPhone14 画出来，相关 CSS 代码如下：

.box {
    position: relative;
    width: 300px;
    height: 600px;
    background: #666;
    border-radius: 50px;
    &::before {
        content: '';
        position: absolute;
        inset: 3px;
        background: #000;
        border-radius: 48px;
    }
    .inner {
        position: absolute;
        inset: 3px;
        border-radius: 48px;
        border: 10px solid #000;
        display: flex;
        justify-content: center;
        opacity: 0;
        transition: 0.3s;
    }
    .btn {
        position: absolute;
        top: 110px;
        left: -2px;
        width: 3px;
        height: 26px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background: radial-gradient(#ccc, #666, #222);
        z-index: 10;
        &.btn2 {
            top: 160px;
            height: 40px;
        }
        &.btn3 {
            top: 220px;
            height: 40px;
        }
    }
    .rightSldeBtn {
        position: absolute;
        top: 170px;
        right: -2px;
        width: 3px;
        height: 70px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background: radial-gradient(#ccc, #666, #222);
        z-index: 10;
    }
}

上面的样式代码都很简略，通过 flex 布局将页面中的元素摆放好方位，然后通过设置不同的背景色烘托出来，上述的代码终究完成的姿态如下图所示：

乍一看，这个姿态跟 iPhone 前面几代几乎没有什么区别，假如不是 iPhone14 新增了一个 ”灵动岛“ 作用，基本看前面的屏幕都看不出什么区别来。已然提到 ”灵动岛“，那咱们接下来就一同来看一下如何完成它吧！

”灵动岛“

目前为止，咱们的手机屏幕仍是黑的，而且还没有相关的壁纸，因而咱们需求先增加一个壁纸，然后当鼠标移入屏幕的时候让它亮起来，相关代码如下：

.box .inner {
    position: absolute;
    inset: 3px;
    background: url('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f6c1f4d91e64c8584a770696b211e1a~tplv-k3u1fbpfcp-watermark.image');
    background-size: cover;
    background-position: center;
    border-radius: 48px;
    border: 10px solid #000;
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}
.box:hover {
    .inner {
        opacity: 1;
    }
}

通过改变 box 里边 inner 的透明度，让整个屏幕亮起来，完成的作用如下图所示：

现在屏幕现已亮了，接下来就需求画出 ”灵动岛“ 了，咱们需求更新一下相关的 html 代码，如下：

<div class="inner">
    <div class="island-popup">
        <div class="content">
            <div class="details">
                <div class="imgBx">
                    <img src="https://p3-passport.byteimg.com/img/user-avatar/7e4a7c01e7022917f7242419f19a6c03~100x100.awebp" />
                </div>
                <p>优弧</p>
            </div>
            <div class="action">
                <ion-icon name="call" class="red"></ion-icon>
                <ion-icon name="call" class="green"></ion-icon>
            </div>
        </div>
    </div>
</div>

在 inner 内部，咱们增加一个 div 元素，里边就包含了 ”灵动岛“ 相关的内容，这儿由于用到了两个听筒的 icon，因而引入了一个第三方的图标库，但是由于这个第三方库需求增加到 body 终究，而码上没有相关的功能，因而这儿只能通过 js 代码动态将整个图标库刺进到 body 中，相关代码如下：

const s = document.createElement('script');
s.src = 'https://unpkg.com/ionicons@5.0.0/dist/ionicons.js';
document.body.appendChild(s);

接着咱们继续来写 ”灵动岛“ 相关的 CSS 样式，代码如下：

// less
.island-popup {
    position: absolute;
    top: 10px;
    width: 90px;
    height: 25px;
    background: #000;
    border-radius: 20px;
    transition: 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:hover {
        width: 200px;
        height: 25px;
        p {
            visibility: visible !important;
            opacity: 1 !important;
            transition-delay: 0.25s;
        }
        .action {
            visibility: visible !important;
            opacity: 1 !important;
            transition-delay: 0.25s;
        }
    }
    &.active {
        width: 260px;
        height: 60px;
        border-radius: 50px;
        p {
            visibility: visible !important;
            opacity: 1 !important;
            transition-delay: 0.25s;
        }
        .action {
            visibility: visible !important;
            opacity: 1 !important;
            transition-delay: 0.25s;
            top: 12px;
        }
    }
    .content {
        position: relative;
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 10px;
        line-height: 25px;
        p {
            color: #fff;
            font-size: 0.6em;
            cursor: default;
            visibility: hidden;
            opacity: 0;
            transition: 0.5s;
        }
        .details {
            position: relative;
            display: flex;
            align-items: center;
            .imgBx {
                position: relative;
                width: 0;
                height: 0;
                background: #fff;
                border-radius: 50%;
                overflow: hidden;
                transition: 0.5s;
                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
    .action {
        position: relative;
        top: 5px;
        color: #fff;
        display: flex;
        gap: 12px;
        transition: 0.5s;
        visibility: hidden;
        opacity: 0;
        ion-icon.red {
            color: #fd443b;
            transform: rotate(135deg);
            cursor: pointer;
            transition: 0.5s;
        }
        ion-icon.green {
            color: #31d059;
            cursor: pointer;
            transition: 0.5s;
        }
    }
    &.active {
        ion-icon.red { 
            background-color: #fd443b;
            color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 0 8px #fd443b;
            margin-right: 12px;
        }
        ion-icon.green {
            background-color: #31d059;
            color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 0 8px #31d059;
            margin-right: 8px;
        }
        .details {
            .imgBx {
                width: 40px;
                height: 40px;
                margin-right: 8px;
            }
        }
    }
}

上述的样式主要是将屏幕中心的 ”灵动岛“ 烘托在屏幕正中心，而且增加了一个 hover 动画作用，终究完成如下图所示：

到这儿也快收尾了，但是还差一步。还记得咱们前面说的能够点击 ”灵动岛“ 进行打开吗？这儿咱们需求增加几行 js 来完成这个作用，相关代码如下：

let popup = document.querySelector('.island-popup');
popup.onclick = function () {
    popup.classList.toggle('active');
};

咱们只需求给中心的 ”灵动岛“ 增加一个简略的点击事件，不断的切换 ”灵动岛“ 上面的 className ，就能完成终究的 ”灵动岛“ 打开与收起。终究完成的作用在这儿进行查看：

总结

iPhone 系列通过卖了这么多年，最近出的 iPhone14 越发觉得 apple 是不是现已江郎才尽了，iPhone14 与 iPhone13 进行比照，除了电池容量以及芯片的晋级，外加这个 ”灵动岛“ 作用，真心觉得没有更多的亮点了，对此，你怎么看？你会买 iPhone14 吗？

终究，假如这篇文章有协助到你，❤️关注+点赞❤️鼓励一下作者，谢谢我们

往期回顾

本年中秋的月亮真漂亮~

『纯 CSS 完成』哇塞，彩虹还能这么玩？

『禁止吸烟』纯 CSS 完成 | 禁烟也能做的这么酷炫

送你一个心爱的大圆脸，速来~

这么炫酷的 3D Menu 作用，真的不来看看？

产品经理：你这个作用不可，我想要一个五彩斑斓的黑！我：。。。

CSS 复刻 iPhone14，并接到了优弧的电话😏，还不快接电话？

前语

iPhone14 外观

”灵动岛“

总结

往期回顾

相关文章

Vue3这样子结合hook写弹窗组件更快更高效

保姆级Vue3+Vite项目实战多布局（上）

Selenium WebDriver基本知识点 🚗💡

git 常见命令整理

作者信息