代码:纯css和flutter分别实现呼吸灯效果(实例代码)

2年前 (2024-02-21)CSS3.1k

复制本页网址打印

上一次有一位非常好学的粉丝儿问可不可以把月亮做一个呼吸灯效果，因为没有找到月亮大小的图，就用星星代替
今天，本博主用纯css和flutter动画分别实现它，记得收藏学习哦
效果：

想要测试的，原图在文章末尾

实现原理：
准备两张图，让两张图交替出现。

纯css实现，代码如下：

  <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title></title>      <style>          *{              margin: 0;              padding: 0;          }          .wrap{              width: 300px;              height: 300px;              position: relative;              margin: 0 auto;              overflow: hidden;          }          .img1,          .img2{              margin-top: 100px;              width: 100px;              position: absolute;          }          .img2{              -webkit-animation: breath 3s infinite ease-in-out alternate;              animation: breath 3s infinite ease-in-out alternate;          }          @-webkit-keyframes breath {              0% {opacity: .2;}60% {opacity: 1;}to {opacity: .2;}          }          @keyframes breath {              0% {opacity: .2;}60% {opacity: 1;}to {opacity: .2;}          }      </style>  </head>  <body>  <div class="wrap">      <img src="images/star1.jpg" alt="底图" class="img1">      <img src="images/star2.jpg" alt="上图" class="img2">  </div>    </body>  </html>

好了，以上就是代码:纯css和flutter分别实现呼吸灯效果(实例代码)相关的全部内容，希望对您有帮助！

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！