美文网首页
CSS技巧:利用animation breath动画实现超科技炫

CSS技巧:利用animation breath动画实现超科技炫

作者: A云A | 来源:发表于2019-01-27 17:19 被阅读0次

    在阿里云看到 Banner 上的动画效果, 感觉非常具有科技感.
    看了下源码,原来只是用CSS3里animation breath 的 效果,中文名叫呼吸灯效果.
    利用 animation 来实现的动画效果.

    好东西要得学呀~ 写了一个 demo 记录一下.

    效果图

    HTML 代码

    <div class="wrap">
      <img src="http://cdn.nickspace.cn/bg.jpg" alt="呼吸底灯背景图" class="img1">
      <img src="http://cdn.nickspace.cn/main.png" alt="呼吸灯动效图" class="img2">
    </div>
    

    CSS3 代码

    *{margin:0;padding:0;border:0}
    .wrap{width:500px;height:315px;position:relative;margin:0 auto;overflow:hidden}
    .img1,
    .img2{width:500px;height:315px;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}
        70%{opacity:1}
        to{opacity:.2}
    }
    @keyframes breath{
        0%{opacity:.2}
        70%{opacity:1}
        to{opacity:.2}
    }
    

    相关文章

      网友评论

          本文标题:CSS技巧:利用animation breath动画实现超科技炫

          本文链接:https://www.haomeiwen.com/subject/jiogjqtx.html