html+css制作运动气泡小动画

最新推荐文章于 2024-04-26 12:59:35 发布

一杯冰美式：）.

最新推荐文章于 2024-04-26 12:59:35 发布

阅读量559

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_65376296/article/details/131729856

版权

文章展示了一个使用HTML和CSS创建的动态气泡效果。通过CSS的径向渐变背景、动画关键帧以及角度旋转，实现了不同颜色的气泡上下浮动，营造出视觉动感。

摘要由CSDN通过智能技术生成

以上是效果静态图（代码在下面）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>运动气泡</title>
       <style type="text/css">
           body{
               background-color: aquamarine;
               overflow: hidden;
           }
           ul{
               list-style: none;
               display: flex;
           }
           li{
               width: 100px;
               height: 100px;
               border-radius: 50%;
               background-image: radial-gradient(rgba(255,255,255,0.3)55% ,rgba(255,255,255,0.8) 80%);
               margin: 400px 100px;

           }
           ul li:nth-child(1){
               background-color: #ADFF2F;
               animation:name 3s 0.5s linear infinite;
           }
           ul li:nth-child(2){
               background-color: azure;
               animation:name 3s 0.7s linear infinite;
           }
           ul li:nth-child(3){
               background-color: bisque;
               animation:name 3s 0.9s linear infinite;
           }
           ul li:nth-child(4){
               background-color: chocolate;
               animation:name 3s 1.1s linear infinite;
           }
           ul li:nth-child(5){
               background-color: chartreuse;
               animation:name 3s 1.3s linear infinite;
           }
           ul li:nth-child(6){
               animation:name 3s 1.5s linear infinite;
           }

           @keyframes name{
               0%{
                   transform: translateY(0px);
               }
               50%{
                   transform: translateY(500px);
               }
               75%{
                   transform: translateY(-250px);
               }
               100%{
                   transform: translateY(0px);
               }
           }
           li::after{
               width: 33%;
               height: 33%;
               border: 3px solid greenyellow;
               border-radius: 50%;
               border-color: rgba(255,255,255,0.8) transparent transparent;
               transform: rotate(45deg);/* 角度旋转 */
               position: absolute;
               top:20%;
               right: 25%;
           }

       </style>
   </head>

   <body>
       <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </body>