当前位置：Gxlcms > css > css3仿写阿里云水纹效果代码分享

css3仿写阿里云水纹效果代码分享

时间：2021-07-01 10:21:17 帮助过：6人阅读

本文主要和大家介绍了css3 仿写阿里云水纹效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

效果图

什么也不说了，上代码。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>css3 水纹效果</title>
  5.     <style type="text/css">
  6.         .point_area {
  7.             text-align: center;
  8.             position: relative;
  9.             width: 150px;
  10.             height: 150px;
  11.             transition: opacity .5s ease-out;
  12.         }
  13.         .point_area .point {
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.             right: 0;
  18.             bottom: 0;
  19.             width: 10px;
  20.             height: 10px;
  21.             margin: auto;
  22.             -webkit-border-radius: 50%;
  23.             -webkit-background-clip: padding-box;
  24.             -moz-border-radius: 50%;
  25.             -moz-background-clip: padding;
  26.             border-radius: 50%;
  27.             background-clip: padding-box;
  28.             background: transparent;
  29.         }
  30.         .point_area .point_dot {
  31.             z-index: 1;
  32.             background-color: #ff903d;
  33.             border: 1px solid rgba(255,144,61,.37);
  34.         }
  35.         .point_area .point_10 {
  36.             width: 100%;
  37.             height: 100%;
  38.         }
  39.         .point_area .point_10:after {
  40.             content: "";
  41.             display: block;
  42.             position: absolute;
  43.             top: 0;
  44.             right: 0;
  45.             bottom: 0;
  46.             left: 0;
  47.             border-radius: 50%;
  48.             border: 2px solid #ff903d;
  49.             opacity: 0;
  50.             -webkit-animation: ripple 4.5s ease-out 225ms infinite;
  51.             animation: ripple 4.5s ease-out 225ms infinite;
  52.         }
  53.         .point_area .point_40 {
  54.             width: 100%;
  55.             height: 100%;
  56.         }
  57.         .point_area .point_40:after {
  58.             content: "";
  59.             display: block;
  60.             position: absolute;
  61.             top: 0;
  62.             right: 0;
  63.             bottom: 0;
  64.             left: 0;
  65.             border-radius: 50%;
  66.             border: 2px solid #ff903d;
  67.             opacity: 0;
  68.             -webkit-animation: ripple 4.5s ease-out .9s infinite;
  69.             animation: ripple 4.5s ease-out .9s infinite;
  70.         }
  71.         .point_area .point_80 {
  72.             width: 100%;
  73.             height: 100%;
  74.         }
  75.         .point_area .point_80:after {
  76.             content: "";
  77.             display: block;
  78.             position: absolute;
  79.             top: 0;
  80.             right: 0;
  81.             bottom: 0;
  82.             left: 0;
  83.             border-radius: 50%;
  84.             border: 2px solid #ff903d;
  85.             opacity: 0;
  86.             -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
  87.             animation: ripple 4.5s ease-out 1.8s infinite;
  88.         }
  89.         @-webkit-keyframes ripple{
  90.             0%{
  91.                 opacity:0;-webkit-transform:scale(.1)
  92.             }
  93.             5%{
  94.                 opacity:1
  95.             }
  96.             to{
  97.                 opacity:0;
  98.                 -webkit-transform:scale(1)
  99.             }
  100.         }
  101.         @keyframes ripple{
  102.             0%{
  103.                 opacity:0;
  104.                 -webkit-transform:scale(.1);
  105.                 transform:scale(.1)
  106.             }
  107.             5%{
  108.                 opacity:1
  109.             }
  110.             to{
  111.                 opacity:0;
  112.                 -webkit-transform:scale(1);
  113.                 transform:scale(1)
  114.             }
  115.         }
  116.     </style>
  117. </head>
  118. <body style="position: relative;">
  119.     <p class="point_area" style="top: 158px; left: 661px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
  120.         <p class="point_name" style="position: absolute; top: 45px; left: 65px;">北京</p>
  121.         <a href="#" target="_blank" class="point point_dot"></a>
  122.         <p class="point point_10"></p>
  123.         <p class="point point_40"></p>
  124.         <p class="point point_shadow point_80"></p>
  125.     </p>
  126. </body>
  127. </html>

相关推荐：

jQuery实现点击水纹波动动画_jquery

以上就是css3仿写阿里云水纹效果代码分享的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！