高防服务器

怎么用纯CSS实现苹果系统的相册图标


怎么用纯CSS实现苹果系统的相册图标

发布时间:2022-02-28 15:38:26 来源:高防服务器网 阅读:82 作者:小新 栏目:web开发

小编给大家分享一下怎么用纯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 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[