乐趣区

关于css:iPhone12纯色系搭配工具

jiezi

iPhone12 纯色系搭配工具

css3d、css 变量

作为一名小屏党，新年打算动手 iphone12mini，于是针对相干信息作了些搜寻，最初决定等明年的 13/12s。
而在浏览电商平台时，针对手机的色彩搭配也思忖了许久，于是乎撸了个色彩搭配器（非主动）来不便配色。

配色范畴

  • 主色
  • 侧边色
  • 镜头块色
  • 镜头边框色
  • logo 色

预览

跳转预览

技术点

三维建模

所谓 css3d , 其本质是在利用 2 维元素去拼装 3 维状态。操作的对象依然是 2 维的立体的盒子模型，即只有长（width）宽（height），没有高。
如果把手机模型视为一个矩形，那么拼装一部手机至多须要 6 个立体（上下左右前后）。

<div class="iphone-device">
    <!-- 前 -->
    <div class="iphone-front"></div>
    <!-- 后 -->
    <div class="iphone-back"></div>
    <!-- 侧边 - 左 -->
    <div class="iphone-left iphone-side"></div>
     <!-- 侧边 - 右 -->
    <div class="iphone-right iphone-side"></div>
     <!-- 侧边 - 上 -->
    <div class="iphone-top iphone-side"></div>
     <!-- 侧边 - 下 -->
    <div class="iphone-bottom iphone-side"></div>
</div>

设模型长宽高别离为：

  • l:508px;
  • w:239.99952px;
  • h:30px;

Transform：

  • 前后两面别离以 Y 轴旋转 0 度与 180 度，并减少 z 轴间隔为 1 /2h。
  • 左右两面别离以 Y 轴旋转 -90 度与 90 度，并减少 z 轴间隔为 1 /2h 和 w-1/2h。
  • 下面先以 Y 轴 90 度，再以 Z 轴旋转 -90 度；上面先以 Y 轴 -90 度，再以 Z 轴旋转 -90 度，并减少 z 轴间隔为 l



圆角坑骗

上一步构建的模型是个纯正的矩形，那么如何实现 3d 圆角呢？因为咱们仍旧是在编辑立体元素，对于曲面的绘制无奈像 3d 建模一样利用算法实现无数个线立体拼凑成一个曲面。
然而，咱们能够用两个切面的角度来造成视觉坑骗，以达到曲面的成果。

css 变量

模型实现之后，紧接着就是配色了，配色技术仍然是陈词滥调的 css 变量 。在根元素上申明所有的色彩变量，对应子元素以 var(--x) 的模式援用。
在 Vue 中，则利用 props 和 computed 属性来实现对象封装。

 // index.css
.iphone-perspective {
    ...
    --main: #bf2a2a;
    --side: #ede9e8;
    --cam: #bf2a2a;
    --camRing: #ede9e8;
    --logo: #ede9e8;
    --dur: 12s;
}
.iphone-front-s,
.iphone-back-s,
.iphone-front,
.iphone-back {
    ...
    background: var(--side);
}
.iphone-brand svg{
    ...
    color: var(--logo);
}
//  PhoneColor.vue
<template>
    <div class="iphone-perspective" :style="extraRoot">
        ...
    </div>
</template>
<script>
    export default {
        name: "PhoneColor",
        props: {
            main: {
                type: String,
                default: '#bf2a2a'
            },
            side: {
                type: String,
                default: '#ede9e8'
            },
            cam: {
                type: String,
                default: '#ede9e8'
            },
            camRing: {
                type: String,
                default: '#bf2a2a'
            },
            logo: {
                type: String,
                default: '#ede9e8'
            },
            animateSpeed: {
                type:Number,
                default: 12
            }
        },
        computed:{extraRoot(){
               const {
                   main,
                   side,
                   cam,
                   camRing,
                   logo,
                   animateSpeed = 12
               } = this
               return {
                   '--main': main,
                   '--side': side,
                   '--cam': cam,
                   '--camRing': camRing,
                   '--logo': logo,
                   '--dur': `${animateSpeed}s`
               }
           }
        }
    }
</script>

Issue

  • 侧边的按钮理论应该与主色配色统一，代码中是懒得画了间接切的图。
  • 为了弥补圆角的冗余局部配色，前后各自减少了一个反面用来填色，从而导致了模型在旋转时会呈现穿模的景象。

源码

Style Code

/*index.css*/
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.iphone-perspective {
    position: relative;
    margin: 0px auto;
    width: 239.99952px;
    height: 508px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 0%;
    -moz-perspective-origin: 50% 0%;
    perspective-origin: 50% 0%;
    --main: #bf2a2a;
    --side: #ede9e8;
    --cam: #bf2a2a;
    --camRing: #ede9e8;
    --logo: #ede9e8;
    --dur: 12s;
}
@keyframes show {
    0%,100%{-webkit-transform: rotateY(17deg) rotateX(17deg);
        -moz-transform: rotateY(17deg) rotateX(17deg);
        transform: rotateY(17deg) rotateX(17deg);
    }
    25%{-webkit-transform: rotateY(180deg) rotateX(-45deg);
        -moz-transform: rotateY(180deg) rotateX(-45deg);
        transform: rotateY(180deg) rotateX(-45deg);
    }
    50%{-webkit-transform: rotateY(272deg) rotateX(-45deg);
        -moz-transform: rotateY(272deg) rotateX(45deg);
        transform: rotateY(272deg) rotateX(-45deg);
    }
    75%{-webkit-transform: rotateY(367deg) rotateX(45deg);
        -moz-transform: rotateY(367deg) rotateX(45deg);
        transform: rotateY(367deg) rotateX(45deg);
    }
}
.iphone-device {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
    -moz-transition: -moz-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
    transform: rotateY(180deg) rotateX(1deg);
    animation: show infinite ease;
    animation-duration: var(--dur);
}
.iphone-device,
.iphone-device > div{
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.iphone-front-s,
.iphone-back-s,
.iphone-front,
.iphone-back {
    width: 239.99952px;
    height: 508px;
    border-radius: 34px;
    overflow: hidden;
    background: var(--side);
}
.notch{
    background: #040404;
    width: 60%;
    height: 30px;
    margin: 0 auto;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    position: relative;
}
.notch::before,
.notch::after {
    content: '';
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}
.notch::before {background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
    right: -8px;
}
.notch:after {background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
    left: -8px;
}
.notch .camera {
    width: 6px;
    height: 6px;
    top: 9px;
    border-radius: 100%;
    position: absolute;
    right: 20px;
    background: #0d4d71;
}
.notch .speaker {
    height: 6px;
    width: 60px;
    left: 50%;
    position: absolute;
    top: 9px;
    margin-left: -30px;
    background: #171818;
    border-radius: 6px;
}
.iphone-cam-group{
    position: relative;
    margin: 15px;
    border-radius: 24px;
    width: 35%;
    height: 20%;
    background: var(--cam);
    box-shadow: 3px 2px 5px 6px #d0cbcd;
}
.iphone-ba-cam1,
.iphone-ba-cam2{
    position: absolute;
    width: 35px;
    height: 35px;
    left: 10px;
    border: 5px solid var(--camRing);
    border-radius: 50%;
    background: radial-gradient(#2c2b31,#335fc2 12.5%,#3b3a3f 30%, #11110f 57.6%, #11110f);
}
.iphone-ba-cam1{top: 10px;}
.iphone-ba-cam2{bottom: 10px;}
.iphone-ba-light{
    width: 6px;
    height: 6px;
    top: 15px;
    position: absolute;
    right: 20px;
    border: 1px solid #dce5ee;
    border-radius: 50%;
    background: #181617;
}
.iphone-ba-spot{
    width: 20px;
    height: 20px;
    top: 50%;
    position: absolute;
    right: 12px;
    border: 1px solid #8a8a88;
    border-radius: 50%;
    background: radial-gradient(#ffffff,#bba99f 12.5%,#bba99f 30%, #f2e9e4 57.6%, #bba99f);
    transform: translateY(-50%);
}
.iphone-brand{
    width: 100%;
    height: 20%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
.iphone-brand svg{color: var(--logo);
    width: 100%;
    height: 100%;
}
.iphone-top,
.iphone-bottom {
    width: 30px;
    height: 179.99952px;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    background-size: 100% 100%;
}
.iphone-left,
.iphone-right {
    width: 30px;
    height: 448px;
}
.iphone-front {
    border: 10px solid #040404;
    background: #444343 url(./waller.jpg) no-repeat top right;
    background-size: cover;
    -webkit-transform: rotateY(0deg) translateZ(15px);
    -moz-transform: rotateY(0deg) translateZ(15px);
    transform: rotateY(0deg) translateZ(15px);
}
.iphone-back {
    border: 1px solid #2e2c2d;
    background: var(--main);
    -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(15px);
    -moz-transform: rotateX(180deg) rotateZ(180deg) translateZ(15px);
    transform: rotateX(180deg) rotateZ(180deg) translateZ(15px);
}
.iphone-front-s {-webkit-transform: rotateY(0deg) translateZ(14px);
    -moz-transform: rotateY(0deg) translateZ(14px);
    transform: rotateY(0deg) translateZ(14px);
}
.iphone-back-s{-webkit-transform: rotateX(180deg) translateZ(14px);
    -moz-transform: rotateX(180deg) translateZ(14px);
    transform: rotateX(180deg) translateZ(14px);
}
.iphone-right {background: var(--side) url("./side-right.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translateY(30px) rotateY(90deg) translateZ(224.99952px);
    -moz-transform: translateY(30px) rotateY(90deg) translateZ(224.99952px);
    transform: translateY(30px) rotateY(90deg) translateZ(224.99952px);
}
.iphone-left {background: var(--side) url("./side-left.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: translateY(30px) rotateY(-90deg) translateZ(15px);
    -moz-transform: translateY(30px) rotateY(-90deg) translateZ(15px);
    transform: translateY(30px) rotateY(-90deg) translateZ(15px);
}
.iphone-top {background: var(--side) url("./side-top.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: rotateZ(-90deg) translateY(15px) rotateY(90deg);
    -moz-transform: rotateZ(-90deg) translateY(15px) rotateY(90deg);
    transform: rotateZ(-90deg) translateY(15px) rotateY(90deg);
}
.iphone-bottom {background: var(--side) url("./side-bottom.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transform: rotateZ(-90deg) translateY(15px) rotateY(-90deg) translateZ(508px);
    -moz-transform: rotateZ(-90deg) translateY(15px) rotateY(-90deg) translateZ(508px);
    transform: rotateZ(-90deg) translateY(15px) rotateY(-90deg) translateZ(508px);
}
.iphone-side:before,
.iphone-side:after {
    position: absolute;
    top: -25px;
    left: 0;
    width: 30px;
    height: 23px;
    background: var(--side);
    background: -webkit-linear-gradient(bottom, var(--side) 0%, var(--side) 100%);
    background: -moz-linear-gradient(bottom, var(--side) 0%, var(--side) 100%);
    background: linear-gradient(to top, var(--side) 0%, var(--side) 100%);
    content: "";
    -webkit-transform: rotateX(22.5deg) translateZ(-7px);
    -moz-transform: rotateX(22.5deg) translateZ(-7px);
    transform: rotateX(22.5deg) translateZ(-7px);
}
.iphone-side:after {
    top: 100%;
    background: -webkit-linear-gradient(top, var(--side) 0%, var(--side) 100%);
    background: -moz-linear-gradient(top, var(--side) 0%, var(--side) 100%);
    background: linear-gradient(to bottom, var(--side) 0%, var(--side) 100%);
    -webkit-transform: rotateX(-22.5deg) translateZ(-7px);
    -moz-transform: rotateX(-22.5deg) translateZ(-7px);
    transform: rotateX(-22.5deg) translateZ(-7px);
}

参考链接

为防止广啊啊告，周边种草链接就不放了，有须要的去原站点自取。

技术链接

  • html5 css3 3D 动画制作手机界面 3D 叠加突出动画成果
  • 13 Pure CSS Mobile Devices.css
  • apple-iphone-12-mini-3d
  • CSS 变量教程
退出移动版