CSS3仿写阿里云水纹效果的示例代码有什么?

CSS3仿写阿里云水纹效果的示例代码有什么?

本文介绍了css3 仿写阿里云水纹效果的示例代码,分享给大家,具体如下:

效果图

CSS3仿写阿里云水纹效果的示例代码有什么?

什么也不说了,上代码。

<!DOCTYPE html>
<html>
<head>
  <title>css3 水纹效果</title>
  <style type="text/css">
    .point_area {
      text-align: center;
      position: relative;
      width: 150px;
      height: 150px;
      transition: opacity .5s ease-out;
    }
    .point_area .point {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 10px;
      height: 10px;
      margin: auto;
      -webkit-border-radius: 50%;
      -webkit-background-clip: padding-box;
      -moz-border-radius: 50%;
      -moz-background-clip: padding;
      border-radius: 50%;
      background-clip: padding-box;
      background: transparent;
    }
    .point_area .point_dot {
      z-index: 1;
      background-color: #ff903d;
      border: 1px solid rgba(255,144,61,.37);
    }
    .point_area .point_10 {
      width: 100%;
      height: 100%;
    }
    .point_area .point_10:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      border: 2px solid #ff903d;
      opacity: 0;
      -webkit-animation: ripple 4.5s ease-out 225ms infinite;
      animation: ripple 4.5s ease-out 225ms infinite;
    }
    .point_area .point_40 {
      width: 100%;
      height: 100%;
    }
    .point_area .point_40:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      border: 2px solid #ff903d;
      opacity: 0;
      -webkit-animation: ripple 4.5s ease-out .9s infinite;
      animation: ripple 4.5s ease-out .9s infinite;
    }
    .point_area .point_80 {
      width: 100%;
      height: 100%;
    }
    .point_area .point_80:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      border: 2px solid #ff903d;
      opacity: 0;
      -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
      animation: ripple 4.5s ease-out 1.8s infinite;
    }
    @-webkit-keyframes ripple{
      0%{
        opacity:0;-webkit-transform:scale(.1)
      }
      5%{
        opacity:1
      }
      to{
        opacity:0;
        -webkit-transform:scale(1)
      }
    }
    @keyframes ripple{
      0%{
        opacity:0;
        -webkit-transform:scale(.1);
        transform:scale(.1)
      }
      5%{
        opacity:1
      }
      to{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
      }
    }
  </style>
</head>
<body style="position: relative;">
  <div class="point_area" style="top: 158px; left: 661px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
    <p class="point_name" style="position: absolute; top: 45px; left: 65px;">北京</p>
    <a href="#" target="_blank" class="point point_dot"></a>
    <div class="point point_10"></div>
    <div class="point point_40"></div>
    <div class="point point_shadow point_80"></div>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。