📌  相关文章
📜  如何使用 HTML5 和 CSS3 制作气泡背景？

📅  最后修改于: 2021-08-29 13:25:04             🧑  作者: Mango

可以使用 HTML、CSS JavaScript 轻松生成水泡背景动画。通过使用 HTML5 我们将设计页面的基本正文部分，通过 CSS3 我们将在后台制作气泡，并在 JavaScript 的帮助下，它会从下到上移动整个页面。
方法：

基本思想是使用 元素创建一个部分，给它一个圆形，然后通过使用 CSS 动画属性 translateY 气泡可以沿着 Y 轴从下到上移动。可以按照以下步骤来获得所需的结果。使用简单的 HTML 标签创建正文。

在 body 标签中创建一个部分，然后写一些将显示在页面正文中的内容。

  • HTML 代码：在本节中，我们将设计一个简单的主体结构：
html


    
        

            
GeeksforGeeks

        

    

css

javascript

html


    
        
        
        
    
    
        

            
GeeksforGeeks

        

        
    

  • CSS 部分：通过使用 CSS，我们可以在背景中制作气泡。首先，我们使用边距、填充和字体样式来修复正文部分。然后我们将尝试修复背景并使用一些属性，如位置、高度、宽度、背景颜色、文本位置等。然后我们将尝试在背景中制作气泡。因为它是一种悬停效果所以我们将使用span和span:before来固定气泡的位置，然后我们将背景固定为透明并给出一些边框，因为它像水泡一样显示，然后我们必须添加一些动画，如“animate 4s linear-gradient”动画。最后的 CSS 部分我们将使用@Keyframes 动画沿 y 轴移动气泡。

css
  • JavaScript：

最后，我们使用 JavaScript 将气泡从页面底部移到顶部。它会给人一种迷人的感觉，看起来像活着。我们将创建一个名为创建气泡的函数并编写一些代码。我们将给它动画并设置时间，最后，我们将添加setInterval(createBubble, 100)因为气泡可以从底部移动到顶部。如果我们不添加这个气泡会在页面底部生成但不会移动到顶部而是继续生成。

  • JavaSript 代码：在这里我们将看到如何移动气泡：

javascript

完整代码：

html 



    
        
        
        
    
    
        

            
GeeksforGeeks

        

        
    

输出：