高防服务器

怎么用纯CSS实现一只纸鹤


怎么用纯CSS实现一只纸鹤

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

这篇文章主要介绍怎么用纯CSS实现一只纸鹤,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  代码解读

  定义dom,容器中包含6个元素,分别代表头、颈、身体侧面、翅、尾、胸:

  <divclass="cranes">

  <spanclass="head"></span>

  <spanclass="neck"></span>

  <spanclass="side"></span>

  <spanclass="wing"></span>

  <spanclass="tail"></span>

  <spanclass="belly"></span>

  </div>

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background-color:dodgerblue;

  }

  定义容器尺寸:

  .cranes{

  width:52em;

  height:50em;

  font-size:7px;

  }

  设置纸鹤的颜色为白色:

  .cranes{

  color:white;

  }

  画出头部:

  .cranes{

  position:relative;

  }

  .head{

  border-left:13emsolidtransparent;

  border-right:6emsolidtransparent;

  border-bottom:2emsolid;

  position:absolute;

  left:0;

  top:21;

  transform:rotate(-5deg);

  }

  把以上创建三角形的代码抽象成一个模板,然后数据都改为变量,类似于调用函数的样子:

  .cranesspan{

  border-left:calc(var(–left)*1em)solidtransparent;

  border-right:calc(var(–right)*1em)solidtransparent;

  border-bottom:calc(var(–bottom)*1em)solid;

  position:absolute;

  transform:rotate(calc(var(–rotation)*1deg));

  left:calc(var(–x)*1em);

  top:calc(var(–y)*1em);

  }

  .head{

  –left:13;

  –right:6;

  –bottom:2;

  –x:0;

  –y:21;

  –rotation:-5;

  }

  设置透明度,以便元素叠加处有折纸效果:

  .cranesspan{

  filter:opacity(0.6);

  }

  接下来就是逐个调用生成三角形的函数创建其他三角形:

  颈:

  .neck{

  –left:6;

  –right:6;

  –bottom:12;

  –x:14;

  –y:19;

  –rotation:75;

  }

  身体侧面:

  .side{

  –left:1.5;

  –right:11.5;

  –bottom:20;

  –x:18.8;

  –y:15.1;

  –rotation:20;

  }

  翅:

  .wing{

  –left:18.7;

  –right:30;

  –bottom:8;

  –x:6.7;

  –y:9.2;

  –rotation:-41.9;

  }

  尾:

  .tail{

  –left:18.6;

  –right:7.7;

  –bottom:3.9;

  –x:19.6;

  –y:38.1;

  –rotation:-126.5;

  }

  胸:

  .belly{

  –left:6.2;

  –right:1.8;

  –bottom:11.5;

  –x:17.5;

  –y:27.8;

  –rotation:-99;

  }

  至此,纸鹤画完。

  最后,增加一点交互效果,当鼠标悬停时,由等腰直角三角形变形成鹤:

  .cranes:hoverspan{

  animation:appear1sease-in;

  }

  @keyframesappear{

  from{

  border-left:3emsolidtransparent;

  border-right:3emsolidtransparent;

  border-bottom:3emsolid;

  position:absolute;

  transform:rotate(0deg);

  left:calc((52em-3em)/2);

  top:calc((50em-3em)/2);

  }

  }

以上是“怎么用纯CSS实现一只纸鹤”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注高防服务器网行业资讯频道!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

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