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

来源：懂视网责编：小OO 时间：2020-11-27 18:49:20

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

效果图；什么也不说了，上代码。<；，144，61。<。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；"。

推荐度：

点击下载本文 文档为doc格式

导读效果图；什么也不说了，上代码。<；，144，61。<。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；"。

本文主要和大家介绍了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;">
 <p 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>
 <p class="point point_10"></p>
 <p class="point point_40"></p>
 <p class="point point_shadow point_80"></p>
 </p>
</body>
</html>

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

推荐度：

点击下载本文 文档为doc格式

标签：代码效果源代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐