有趣的前端css特效-苹果数据线

4,036 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-苹果数据线

今天在某网站溜达的时候发现一个看似平平无奇的图片。就是下面这个。 Image.png 果然是 '平平无奇' 古天乐,看似一张普普通通的苹果数据线高清照片,没想到背后居然大有玄机(整个结构全部是由css完成,无任何图片)

Image.png

1. 首先是这个长三段的乳白色胶线部分

全长三段,可分解为三段长短高度不一致的长方形,两两交界处的阴影再分解成一个小的长方形 通过background-image :linear-gradient 线性渐变,将长方形从下至上、从左到右分别填充灰白色,来模拟出数据线的本身颜色以及光影效果。

    background-image:
        linear-gradient(to bottom,#ddd,#f7f7f7 13%,white 18%,white 35%,#f7f7f7 38%,#f7f7f7 50%,#eee 70%,#ddd 85%,#ccc 95%,#bbb 100%),
        linear-gradient(to left,rgba(0,0,0,0.1),rgba(0,0,0,0)),
        linear-gradient(to bottom,#ccc,#ddd 10%,#edf0f3 30%,#edf0f3 60%,#ccc 92%,#bbb 98%),
        linear-gradient(to left,rgba(0,0,0,0.1),rgba(0,0,0,0)),
        linear-gradient(to bottom,#ccc,#ddd 10%,#edf0f3 30%,#edf0f3 60%,#ccc 95%,#bbb 100%);

通过background-size 设置三段式的大小

 background-size: 11em 6.2em,1em 3.2em,8em 3.2em,.8em 2.3em,calc(50% - 4em) 2.3em;

使用background-position 设置三段式的定位

background-position: calc(50% + 9.5em) 50%,calc(50% + 3.5em) 50%,50% 50%,calc(50% - 4.4em) 50%,0 50%;

如此数据线的线部分就完成了。 下面来拼接数据线的接口部分

Image.png

首先还是使用background-image来描绘接口部分的颜色

    background-image: 
        linear-gradient(to bottom,white 30%,rgba(0,0,0,0.230%,rgba(0,0,0,090%),
        linear-gradient(to top,white 30%,rgba(0,0,0,0.230%,rgba(0,0,0,090%),
        linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0)),
        linear-gradient(to top,rgba(0,0,0,0.15),rgba(0,0,0,0)),
        linear-gradient(to right,rgba(0,0,0,0.25),rgba(0,0,0,0)),
        linear-gradient(125deg,rgba(0,0,0,05%,rgba(0,0,0,0.125%,rgba(255,255,255,0.948%,
    rgba(255,255,255,0.952%,rgba(255,255,255,075%),
        linear-gradient(55deg,rgba(0,0,0,05%,rgba(0,0,0,0.125%,rgba(255,255,255,0.948%,
    rgba(255,255,255,0.952%,rgba(255,255,255,075%),
        linear-gradient(to bottom,#e5e0d5 30%,#c9c3bc 100%);

然后使用background-size设置色块的大小 background-position 设置定位 border-radius 将接头右侧设成弧形 box-shadow 给右侧的接头加上阴影看起来更加形象

background-size: 30% .4em,30% .4em,100% .4em,100% .4em,.4em 100%,30% 50%,30% 50%,100% 100%; 
background-position: 55% 0,55% 100%,0 0,0 100%,0 50%,100% 0,100% 100%,0 50%; 
border-radius: 0 1em 1em 0; 
box-shadow: inset -0.3em 0 0.1em -0.1em rgb(0 0 0 / 20%);

当这些做完后,得到一个半成品的数据接头,效果如下

Image.png

与常规接头相比,还缺少白灰相间类似芯片一样的部分。

首先给伪类设置合适个宽高并定位于上一步完成的样式右侧 设置背景色为白色 设置background-image 为间隔的白色、底色,模拟出条形码的样式

background-image: repeating-linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0) .18em,white .18em,white .36em),linear-gradient(to bottom,#ddd 20%,#bbb);

设置大小及定位

background-size: 50% 75%; 
background-position: 50% 50%

将边角削圆润,并加上阴影。

border-radius: .5em; box-shadow: -0.1em 0 0.1em rgb(0 0 0 / 7%), 0.2em 0 0.1em rgb(0 0 0 / 10%);

合并起来就得到一个数据头

Image.png


至此,一根与实物照片相似度高达99%的苹果数据线就完成了。