共计 8304 个字符,预计需要花费 21 分钟才能阅读完成。
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 变量教程
正文完