首页 > 其他分享 >使用clip-path将 GIF 绘制成跳动的字母

使用clip-path将 GIF 绘制成跳动的字母

时间:2023-07-29 21:04:52浏览次数:40  
标签:hover polygon clip 100% GIF 0% path

前言

之前看到过一个有趣的CSS效果,今天我们也来实现一遍,将动图GIF通过clip-path绘制成一个个跳动的字母。

效果如下:

使用clip-path将 GIF 绘制成跳动的字母_前端

GIF随便找的,嗯?这不是重点,重点是下面的实现过程,别被GIF吸引了。

如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新文章~

绘制字母

这是该效果的最重要部分,使用clip-path来绘制对应的字母。

MDN上对clip-path的定义如下:

使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

我们先来绘制一个字母,以字母U为例,因为这个绘制过程也有一个过渡动画,所以我们需要绘制两条路径两条路径必须具有相同数量的点

使用clip-path将 GIF 绘制成跳动的字母_前端_02

这就是字母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将 GIF 绘制成跳动的字母_css_03

现在我们就来实现这个字母的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>

来看看效果:

使用clip-path将 GIF 绘制成跳动的字母_f5_04

是不是有点感觉了,少了鹿晗差点感觉?别急着就给你加上。

添加背景

直接给这个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;
}

效果如下:

使用clip-path将 GIF 绘制成跳动的字母_前端_05

添加摇晃的动画

这个就比较简单了

@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将 GIF 绘制成跳动的字母_关键帧_06

添加变色

为了更好的看到效果,这里又添加了几个字母,并生成了对应的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);
}

此时效果是这样的:

使用clip-path将 GIF 绘制成跳动的字母_关键帧_07

此时跟我们最终的效果就差一个变色了,变色其实也很简单,在关键帧中三种颜色之间不断进行转换,#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 绘制成跳动的字母_关键帧_08

标签:hover,polygon,clip,100%,GIF,0%,path
From: https://blog.51cto.com/u_13756259/6895135

相关文章

  • Atcoder ABC259H Yet Another Path Counting
    首先可以想到有组合数的方法:令起点为\((x1,y1)\),终点为\((x2,y2)\),则路径方案数就为\(\binom{x2+y2-x1-y1}{x2-x1}\),这样设有\(k\)个相同颜色的点,时间复杂度就为\(O(k^2)\)。再考虑到还有\(\text{DP}\)方法:令\(f_{x,y}\)为走到\((x,y)\)的方案数,不限制......
  • Azure Virtual Network (21) ER专线启用Fast Path
    《WindowsAzurePlatform系列文章目录》 在AzureER专线启动FastPath,具体的区别如下:禁用FastPath启用FastPathAzureVM访问本地VM流量,流量不经过ER网关AzureVM访问本地VM流量,流量不经过ER网关本地VM流量访问AzureVM流量,流量经过ER网关本地VM流量访......
  • CF938G Shortest Path Queries 题解
    目录题目链接题目分析为什么使用生成树建树对于异或贡献的分析code题目链接CF938G洛谷挂了只能交CF题目分析本题有以下几个关键点:为什么使用生成树建树首先根据\(WC2011\)我们发现可以使用\(dfs\)序来保存节点之间的关系但是我们发现本题目中存在加边删边操作不......
  • k8s数据卷 Volume 之 hostPath 与 emptyDir
    一、为什么需要volume(数据卷)?容器中的文件在磁盘上是临时存放的,这给容器中运行比较重要的应用程序带来一些问题。问题1:当容器升级或者崩溃时,kubelet会重建容器,容器内文件会丢失问题2:一个Pod中运行多个容器需要共享文件。Kubernetes卷(Volume)这一抽象概念能够解决这两个问题......
  • classpath的jar包中读取文件
    在idea中读取resources下的文件没有问题(调用getFile),但是打成jar包就会出问题;使用spring的ClassPathResource或者hutool的ClassPathResource去解析文件都会有问题;但是使用上面两个工具去读取inputstream或者byte就没问题,因为内部都是调用ClassLoader的getResource方法,如果是文件......
  • @Value("${dbpc.path}")和@Value("#{dbpc.path}")区别
    这两个注解都可以用来将值注入到JavaBean的字段中。但是,它们的使用方式略有不同。@Value("${dbpc.path}")是Spring框架中的注解之一,用于从Spring配置文件中获取属性值,并将其注入到JavaBean的字段中。该注解可以用于注入基本类型、字符串、数组、集合、对象等类型的值。@Value(......
  • xpath丶BeautifulSoup丶pyquery丶jsonpath 解析html与json串
    XPath与jsonpath1importjson2fromlxmlimportetree3fromjsonpathimportjsonpath45defjson_test():6str1='{"name":"埃里克森"}'7#将字符串转为Pythondict对象8js_obj=json.loads(str1)9print(typ......
  • Eclipse for c/c++ 导入外面项目没有信息打印出来
      eclipseforc/c++ 导入外面项目没有信息打印出来: 就是因为这个Binaries里面二进制文件太多了,不知道运行哪一个,造成无输出,全删或只保留一个再编译运行: 运行成功:thevalueofsin(2.0)is0.909297TheIDofthisthreadis:-1202372520155============gett......
  • UE5 FPaths 路径 使用记录
    相关路径节点获取配置文件路径FStringUBlueprintPathsLibrary::EngineConfigDir(){ returnFPaths::EngineConfigDir();}注意ProjectContentDir函数编辑模式下返回全路径,运行模式下返回相对路径GetProjectContentDirectory函数返回全路径......
  • GDI+区域(Region)排除与路径(GraphicsPath)叠加透明
    1、区域(Region)排除 1CRectrt;2GetClientRect(&rt);34GraphicsPathpa;5pa.AddEllipse(0,0,rt.Width(),rt.Height());6Regionrg(Rect(0,0,rt.Width(),rt.Height()));7rg.Exclude(&pa);8graphics.FillRegion(&SolidBrush(Color(255,0,......