30个CSS碎片拼出动物动态图--这不仅仅是皮囊!

大家好,欢迎来到程序视点!

今天将给大家分享一部由CSS技术实现的作品。它将再一次证明CSS的强大力量。

欣赏

这是一部由阿姆斯特丹设计师Bryan James通过30张CSS碎片拼图展现30种濒临灭绝动物的网站。

有生活在夏威夷岛林地中的夏威夷乌鸦。 有栖息于墨西哥西部加利福尼亚湾中的小头鼠海豚。 原产于巴西大西洋沿岸地区的金狮面狨。 印度中部繁殖生活的林斑小鸮。 大西洋到墨西哥湾都有分布的肯氏龟。 生活在非洲西南岸的黑脚企鹅。 还有喜欢的南非白纹羊弯角剑羚。 以及原产于东南亚及澳洲大陆鸟翼蝶鸟翼蝶。 其他珍稀动物形象,请查阅地址: www.webhek.com/misc-res/sp...

欣赏完作品,我们是不是应该想想怎么来实现了?

实操

作品中的拼图碎片其实就是一个一个的不规则多边形。同时,它们还伴随着动画变形和过渡效果。

在CSS中,clip-path家族的polygon就提供了如此方便和强大的效果。clip-path属性允许你将元素裁剪为基本形状或 SVG ,从而在CSS中制作复杂形状。

polygon规则限制少,任意多边形,只要边是直的就行,比圆之类的图形发挥的空间更大。通过polygon(x1 y1, x2 y2, ..., xn yn)定义了每一个点的坐标(x轴和y轴位置),起点是从左上角开始计算的,可以用百分百,也可以用px等单位。现在,让我们先来画一个三角形。

JavaScript 复制代码
<div style="margin: 5rem auto;
  width: 150px; 
  height: 150px; 
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div

运行上面代码将立即获得下图的三角形。

clip-path还可以配合动画和过渡属性使用:两个或更多个具有相同点数的剪辑路径形状可以使用CSS的动画(Animations)和过渡(transitions)。让我们一起来给三角形加上动画和过渡效果。 动画:正三角变为倒三角。注意polygon的动画变形的一个重要条件:坐标的数目变形前后必须一致。

过渡:hover的时候background-color颜色由红色过渡到黄色。

JavaScript 复制代码
<div class="turning"></div>
<style>
    .turning {
    margin: 5rem auto;
    width: 150px; 
    height: 150px; 
    background-color: red;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transition: all 1s ease;
    -webkit-transition: all 1s ease; 
}
.turning:hover {
    animation: clipDiamondIn 1s;
    background-color: yellow;
    clip-path: polygon(100% 0, 50% 100%, 0% 0%);
}
@keyframes clipDiamondIn {
    from  {
        background-color: red;
    }
    to {
        background-color: yellow;
    }   
}
</style>

这里还在整理了一套使用polygon来实现如下图形的代码。欢迎大家取用。 polygon对点的数目没有限制,能实现的图形非常丰富。有限制的反而是我们的想象力。

本文所展示的实例也仅仅是polygon应用的冰山一角。

最后,对上文中动物拼图源码感兴趣的小伙伴,请关注下方地址。

www.species-in-pieces.com/

如文章对你有所帮助,别忘了点赞、留言、分享哦!

相关推荐
黑云压城After2 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务4 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER6 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰6 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js