css3呼吸灯效果

<br /> See the Pen <a href="https://codepen.io/Beiyu/pen/abpLOvV">css3呼吸灯效果</a> by Beiyu<br /> (<a href="https://codepen.io/Beiyu">@Beiyu</a>) on <a href="https://codepen.io">CodePen</a>.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>呼吸灯</title>
    <style type="text/css">
      .breath {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        opacity: 0.1;
        overflow: hidden;
        background: #ff3;
        margin: 25% auto;

        animation-name: breath;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
      }

      @keyframes breath {
        from {
          opacity: 0.1;
        }
        50% {
          opacity: 0.5;
        }
        to {
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <div class="breath" title="呼吸灯"></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

.breath {

width: 300px;

height: 300px;

border-radius: 50%;

opacity: 0.1;

overflow: hidden;

background: #ff3;

margin: 25% auto;

animation-name: breath;

animation-duration: 3s;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

}

@keyframes breath {

from {

opacity: 0.1;

}

50% {

opacity: 0.5;

}

to {

opacity: 0.1;

}

</style>

</head>

<body>

</body>

</html>