【开发小技巧】020—用HTML和CSS在文本上如何创建液体填充动画效果?

共 2167字,需浏览 5分钟

 ·

2020-08-27 09:49

来源 | web前端开发公众号
液体填充文字动画可以使用CSS | :: before选择器。我们将使用关键帧设置动画每一帧的高度。
本文的基本样式完成情况,这完全取决于你希望的文本外观。最主要的是关键帧。
对于上半部分的百分比,我们增加高度,而对于下半部分百分比,我们减小高度。我们使用25%作为高度的最小值。你可以使用百分比值来更改,以根据需要更改动画的最小和最大高度以及外观。
在本文中,我们将创建将在其中应用液体填充效果的文本。要创建结构,将需要标准的HTML。
HTML代码
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>用HTML和CSS在文本上如何创建液体填充动画效果?title> head> <body> <center> <h1>WEB前端开发公众号h1> center> body> html>
在开始CSS之前,你必须熟悉CSS中的一些概念,其他效果则完全取决于开发者。
CSS代码:
<style> body { margin: 0; padding: 0; }
h1 { margin: 200px 0; padding: 0; font-size: 80px; position: relative; color:green; }
h1:before { content: "WEB前端开发公众号"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:white; overflow: hidden; animation: animate 6s infinite; }
@keyframes animate { 0% { height: 25%; } 25% { height: 50%; } 50% { height: 65%; } 75% { height: 40%; } 100% { height: 25%; } } style>
最后,我们将上述两个部分代码内容合并为一体,以实现对文本的液体填充效果。
完整代码如下:
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>        用HTML和CSS在文本上如何创建液体填充动画效果?  title>
<style> body { margin: 0; padding: 0; }
h1 { margin: 200px 0; padding: 0; font-size: 80px; position: relative; color:green; }
h1:before { content: "WEB前端开发公众号"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:white; overflow: hidden; animation: animate 6s infinite; }
@keyframes animate { 0% { height: 25%; } 25% { height: 50%; } 50% { height: 65%; } 75% { height: 40%; } 100% { height: 25%; } } style> head>
<body> <center> <h1>WEB前端开发公众号h1> center> body>
html>

最终效果如下:

浏览 17
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报