怎么用纯CSS实现苹果系统的相册图标
怎么用纯CSS实现苹果系统的相册图标
小编给大家分享一下怎么用纯CSS实现苹果系统的相册图标，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
代码解读
定义dom，容器中包含8个元素，每个元素代表一个矩形色块：
<divclass="icon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#ccc;
}
定义容器尺寸：
.icon{
width:10em;
height:10em;
font-size:30px;
background-color:#eee;
border-radius:20%;
}
绘制出矩形的轮廓（边框为辅助线，最终会被删除），并放置在容器的中上方：
.icon{
position:relative;
display:flex;
justify-content:center;
box-sizing:border-box;
padding:1em;
}
.iconspan{
position:absolute;
width:22.5%;
height:37.5%;
border:1pxdashedblack;
border-radius:50%/30%;
}
为矩形设置下标变量–n：
.iconspan:nth-child(1){
–n:1;
}
.iconspan:nth-child(2){
–n:2;
}
.iconspan:nth-child(3){
–n:3;
}
.iconspan:nth-child(4){
–n:4;
}
.iconspan:nth-child(5){
–n:5;
}
.iconspan:nth-child(6){
–n:6;
}
.iconspan:nth-child(7){
–n:7;
}
.iconspan:nth-child(8){
–n:8;
}
让8个矩形依次旋转固定的角度，围合成一个圆形：
.iconspan{
transform-origin:center105%;
transform:rotate(calc((var(–n)-1)*45deg));
}
为矩形设置颜色变量–c：
.iconspan:nth-child(1){
–c:rgba(243,156,18,0.7);
}
.iconspan:nth-child(2){
–c:rgba(241,196,15,0.7);
}
.iconspan:nth-child(3){
–c:rgba(46,204,113,0.7);
}
.iconspan:nth-child(4){
–c:rgba(27,188,155,0.7);
}
.iconspan:nth-child(5){
–c:rgba(65,131,215,0.7);
}
.iconspan:nth-child(6){
–c:rgba(102,51,153,0.7);
}
.iconspan:nth-child(7){
–c:rgba(155,89,182,0.7);
}
.iconspan:nth-child(8){
–c:rgba(242,38,19,0.7);
}
为8个矩形上色，并删除掉起辅助线作用的边框：
.iconspan{
/*border:1pxdashedblack;*/
background-color:var(–c);
}
设置混色模式，使重叠颜色能叠加在一起：
.iconspan{
mix-blend-mode:multiply;
}
增加鼠标悬停效果，当悬停时运行矩形色块展开的动画：
.icon:hoverspan{
animation:rotating2sease-in-outforwards;
}
@keyframesrotating{
from{
transform:rotate(0deg);
}
to{
transform:rotate(calc((var(–n)-1)*45deg));
}
}
注意，在动画过程中第1个矩形并没有转动，因为它是从0度转到0度，为了让它转动，要把它的结束角度设置为360度，通过修改它的下标变量来实现：
.iconspan:nth-child(1){
–n:9;
}
以上是“怎么用纯CSS实现苹果系统的相册图标”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[