HTML+CSS3实现文字液态流动渐变特效代码 - 汇站网

HTML+CSS3实现文字液态流动渐变特效代码

2023-10-07 0 414

正文:

液态文字具有强烈的视觉效果~

我们可以使用在线 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 动画特效-液态渐变文字代码,你可以根据需要自由调整样式,如字体大小、字体粗细等。

注意:不同浏览器对 CSS 属性的支持可能有所不同,请在浏览器中进行测试和调整以确保兼容性。

转载请注明:汇站网 » HTML+CSS3 实现文字液态流动渐变特效代码

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 技术安全 HTML+CSS3实现文字液态流动渐变特效代码 https://www.huizhanii.com/33398.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com