个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
36
4
之前看到过一个有趣的CSS效果，今天我们也来实现一遍，将动图GIF通过 clip-path 绘制成一个个跳动的字母.
效果如下:
GIF随便找的，嗯？这不是重点，重点是下面的实现过程，别被GIF吸引了.
如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～ 。
这是该效果的最重要部分，使用 clip-path 来绘制对应的字母.
MDN上对 clip-path 的定义如下:
使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏.
我们先来绘制一个字母，以字母 U 为例，因为这个绘制过程也有一个过渡动画，所以我们 需要绘制两条路径两条路径必须具有相同数量的点 .
这就是字母 U 过度动画的开始与结束的路径.
它对应的 clip-path 代码如下:
.u {
clip-path: polygon(
0 0,
0 100%,
100% 100%,
100% 0,
84% 0,
61% 0,
41% 0,
19% 0
);
}
/* hover */
.container:hover .u {
clip-path: polygon(
0 6%,
5% 100%,
96% 88%,
98% 3%,
71% 5%,
71% 62%,
31% 68%,
25% 0
);
}
这个路径也不必担心不会写，可以直接通过工具 clippy 生成，非常方便，其它字母都可直接从这生成对应的绘制路径 。
现在我们就来实现这个字母的 clip-path 以及动画 。
<style>
body {
width: 100vw;
height: 100vh;
background: #000;
}
.container {
--duration: 700ms;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
max-width: 400px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 10px auto;
}
.letter {
width: 80px;
height: 80px;
background: salmon;
transition: clip-path var(--duration) var(--ease);
}
.u {
clip-path: polygon(
0 0,
0 100%,
100% 100%,
100% 0,
84% 0,
61% 0,
41% 0,
19% 0
);
}
/* hover */
.container:hover .u {
clip-path: polygon(
0 6%,
5% 100%,
96% 88%,
98% 3%,
71% 5%,
71% 62%,
31% 68%,
25% 0
);
}
</style>
</head>
<body>
<div class="container">
<div class="letter u"></div>
</div>
</body>
来看看效果:
是不是有点感觉了，少了鹿晗差点感觉？别急着就给你加上.
直接给这个div加上 gif 背景行不行？直接添加当然也可以，但想要给他加点合成虚化的效果，这里就可以使用 mix-blend-mode 来实现 。
MDN上对 mix-blend-mode 的定义如下 。
描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合.
添加代码:
.letter::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
user-select: none;
background-image: url("https://img.soogif.com/xiOE4Hs23bEoQVgN15NOtTUJ7cxFeExY.gif");
background-position: 50% 0%;
background-size: cover;
mix-blend-mode: soft-light;
}
效果如下:
这个就比较简单了 。
@keyframes letter {
25% { transform: translate(-5%, 5%) scale(1.05) rotate(-5deg) }
50% { transform: translate( 5%, -2%) rotate( 2deg) }
75% { transform: translate(10%, 0%) scale(1.02) rotate( 8deg) }
100% { transform: translate( 0%, -5%) rotate( 4deg) }
}
@keyframes dance {
100% { transform: scale(1.25) }
}
现在的效果如下:
为了更好的看到效果，这里又添加了几个字母，并生成了对应的 clip-path 。
.u {
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 84% 0, 61% 0, 41% 0, 19% 0);
}
.container:hover .u {
clip-path: polygon(0 6%, 5% 100%, 96% 88%, 98% 3%, 71% 5%, 71% 62%, 31% 68%, 25% 0);
}
.a {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.container:hover .a {
clip-path: polygon(46% 2%, 57% 0, 100% 83%, 0% 100%);
}
.s {
clip-path: polygon(0% 0%, 51% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
}
.container:hover .s {
clip-path: polygon(100% 0, 60% 40%, 100% 70%, 0 100%, 40% 60%, 0 30%);
}
.d {
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 60% 60%, 60% 60%, 40% 40%, 40% 40%, 25% 100%, 100% 100%, 100% 0%);
}
.container:hover .d {
clip-path: polygon(6% 2%, 0 93%, 31% 100%, 27% 30%, 54% 34%, 61% 59%, 21% 72%, 31% 100%, 100% 74%, 76% 11%);
}
.p {
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 49% 56%, 49% 46%, 49% 47%, 19% 56%, 25% 100%, 100% 100%, 100% 0%);
}
.container:hover .p {
clip-path: polygon(5% 3%, 2% 100%, 33% 92%, 24% 18%, 71% 25%, 57% 46%, 25% 41%, 19% 66%, 90% 55%, 100% 0);
}
此时效果是这样的:
此时跟我们最终的效果就差一个变色了，变色其实也很简单，在关键帧中三种颜色之间不断进行转换， #a6e630 ， #f5e82f ， 和 #4cb8f5 。
.container:hover .letter {
animation: calc(var(--duration) * 2) calc(var(--i) * (var(--duration) / -3)) steps(3, end) alternate infinite;
animation-name: colors, letter;
}
.container:hover .letter::before {
animation: dance calc(var(--duration) * 2) calc(var(--i) * (var(--duration) / -3)) steps(3, end) infinite;
}
@keyframes colors {
0% { background-color: #a6e630 }
50% { background-color: #f5e82f }
100% { background-color: #4cb8f5 }
}
此时最终的效果就完成了～ 。
最后此篇关于使用clip-path将GIF绘制成跳动的字母的文章就讲到这里了,如果你想了解更多关于使用clip-path将GIF绘制成跳动的字母的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
36
4
0
有谁知道是否可以将多个 gif 或动画 gif 加入到一个动画 gif 中(即，将这些帧连接到一个主动画 gif 中)？ 我想要一些服务器端功能来执行此操作。 文件的尺寸、模式等将相同，只是内容不同。
提前道歉，但这不是一个真正的photoshop问题。相反，我试图想出一些令人信服的东西，但尽可能地利用 gif 格式的压缩和特性来为动画生成尽可能小的文件。 一些限制: 它需要至少 20 或 30 帧
如何创建播放一次并在最后一帧卡住的 GIF 图像。 我已经将循环属性设置为 1，所以第一个问题解决了。 但是动画结束后，gif并不是在最后一帧卡住，而是回到第一帧。 最佳答案 您需要将 gif 的循环
我有两个不同大小的 GIF。我希望能够将一个动画 GIF 放在特定位置的静态背景 GIF 上，同时将文本添加到结果中。我是 ImageMagick 世界的新手，请帮忙。 我试图实现以下结果，其中狗贴纸
你好 stackoverflow 世界。(这是我第一次在这里真正发布问题。令人兴奋) 不久前，我从我公司的一个团队那里继承了一个已有 2 年历史的 MVC 网站。我现在知道这个解决方案的大部分来龙去脉
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 1 年前。
我想将我的处理草图之一导出为 gif 形式，并使用 extrapixel 的 Gif 动画库 ( http://extrapixel.github.io/gif-animation/ ) 来执行此操作
我正在寻找一个可以处理动画 gif 图像并在其上写入文本的函数。 工作解决方案可能由 Gif4j lib 提供，但我正在寻找开源解决方案或建议如何自行实现它。 如何在 Java 中将文本放在 gif
这个问题在这里已经有了答案: Change File Extension Using C# (6 个答案) 关闭 8 年前。 此代码将重命名所有文件名: static private void Re
我会保持简短； 有什么方法可以区分静态 GIF 图像和动画图像吗？我正在使用 C#。 谢谢 最佳答案 Here's an article about how to determine the numb
我试图在视频上重叠动画 gif，但没有成功。 我的目标是下一个: gif 动画必须循环播放，直到视频结束。 gif 被缩放以覆盖整个视频。 gif 保留透明度。 我在这方面取得的最大成就是 gif 使
在您的网站上放置网站图标时，您显然可以使用动画 gif，只需将 gif 文件的扩展名更改为 .ico . http://www.k-director.com/blog/how-to-add-an-an
所以我试图为一个充满 gif 的文件夹添加水印，但我收到一条错误消息，说我当时只能使用一个 GIF 流，有没有办法绕过这个问题？ @echo off setlocal for %%G in ("%~d
我有大约 200 张 jpg 图像。我需要堆叠它们，以便我可以将它们转换为简单的动画 gif 图像。是否有任何免费工具可以完成这项工作？我的操作系统是windows。 我不太关心输出的质量。 最佳答案
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
我想使用库显示 GIF WPF Animated GIF 。但是，当设置属性 PictureSource 时，进程内存会从 208MB 增加到 1GB。为什么？ XAML
几天后我有话要说。我必须引用细胞原子。我想在显示元胞自动机进化的幻灯片中显示一个小 gif，所以我的问题是:如何将使用 golly game of life 创建的模式和进化转换为动画 gif？ 最佳
看这段代码: $('#loader').show(); $.post( '/action.php', function( data ) { // do anything with data $('#
作为项目的一部分，我们需要以编程方式将多个动画 GIF 以网格的形式组合成一个主动画 GIF(一个 gif 文件)。 我们不关心它是在客户端(即带有 ios/android 的智能手机)还是在服务器端
我正在制作一个小游戏。这不是 Action 游戏，而是解谜游戏，因此性能并不是那么重要。现在，我有了主游戏区，一张背景图片。在某些情况下，我想在部分背景图像上绘制其他图像。我的问题是背景图片和叠加的图
我是一名优秀的程序员,十分优秀！