液态字体怎么做出来？HTML+CSS3实现文字液态流动渐变特效代码~
液态文字很具有视觉冲击力~
我们可以通过PS工具在线来制作这样的一个液态字的效果，但是做出来以后文件会比较大，不方便用于网站页面展示等
无需PS等软件把液态字体怎么做出来？
下面教你通过HTML+CSS3来实现文字液态流动渐变代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>HTML+CSS3液体字体特效代码-洽单资源库</title>
<style>
/* 重置默认的margin、padding和box-sizing样式 */
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* body元素的样式 */
body{
background: #03001C; /* 设置背景颜色 */
display: flex; /* 使用flexbox布局 */
align-items: center; /* 纵向居中对齐元素 */
flex-direction: column; /* 将元素按列排列 */
justify-content: center; /* 横向居中对齐元素 */
font-size: 4em; /* 设置字体大小 */
min-height: 100vh; /* 视口的最小高度 */
}
/* content容器的样式 */
.centent
{
position: relative; /* 设置定位上下文 */
}
/* 第一个h2元素的样式 */
h2
{
color: transparent; /* 使文字颜色透明 */
-webkit-text-stroke: 3px #03a9f4; /* 给文字添加带颜色的描边效果 */
}
/* 第二个h2元素的样式 */
h2:nth-child(2)
{
position: absolute; /* 设置绝对定位 */
top: 0; /* 将元素置于顶部 */
color: transparent; /* 设置文字颜色透明 */
background: linear-gradient(to right, green, blue, purple); /* 设置渐变背景色 */
background-clip: text; /* 将背景色应用到文字内部 */
-webkit-background-clip: text; /* Safari支持 */
animation: animate 5s ease-in-out infinite; /* 使用动画效果 */
}
/* 定义animate动画 */
@keyframes animate
{
0%, 100%
{
clip-path: polygon(0 39%, 18% 51%, 34% 55%, 50% 48%, 61% 34%, 80% 31%, 99% 44%, 100% 99%, 1% 99%); /* 定义裁剪路径 */
}
50%
{
clip-path: polygon(0 51%, 24% 72%, 53% 76%, 70% 70%, 83% 56%, 88% 46%, 100% 24%, 100% 99%, 1% 99%);
}
80%
{
clip-path: polygon(0 52%, 22% 36%, 39% 36%, 50% 47%, 62% 57%, 81% 56%, 98% 45%, 100% 99%, 1% 99%);
}
}
</style>
</head>
<body>
<div class=”centent”>
<h2>洽单资源平台</h2> <!– 第一个h2元素 –>
<h2>洽单资源平台</h2> <!– 第二个h2元素 –>
</div>
</body>
</html>
HTML+CSS3动画特效-液态渐变文字代码你可以根据需要修改样式，如字体大小、字体粗细等
PS：不同浏览器对CSS属性的支持可能有所不同，自己在浏览器中进行测试和调整兼容性~
本站采用署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)许可协议授权。
本站坚持“不能用的源码发出去都是浪费大家时间“，付费源码都是亲测的
源码已测试,但不保证完美无bug！站长是一位10年老技术，所有会员都可以免费咨询，在线指导提供运营建议！交个朋友~
洽单资源库仅提供学习的平台，所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，请联系客服予以删除。
洽单资源库 » 液态字体怎么做出来？HTML+CSS3实现文字液态流动渐变特效代码~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 洽单资源库
