css3 仿写阿里云水纹效果的示例代码
网站建设 2023-01-28 21:39www.1681989.com免费网站
本文介绍了css3 仿写阿里云水纹效果的示例代码，分享给大家，具体如下
效果图
什么也不说了，上代码。
<!DOCTYPE html>
<html>
<head>
<title>css3 水纹效果</title>
<style type="text/css">
.pot_area {
text-align: center;
position: relative;
width: 150px;
height: 150px;
transition: opacity .5s ease-out;
}
.pot_area .pot {
position: absolute;
: 0;
left: 0;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
marg: auto;
-webkit-border-radius: 50%;
-webkit-background-clip: paddg-box;
-moz-border-radius: 50%;
-moz-background-clip: paddg;
border-radius: 50%;
background-clip: paddg-box;
background: transparent;
}
.pot_area .pot_dot {
z-dex: 1;
background-color: #ff903d;
border: 1px solid rgba(255,144,61,.37);
}
.pot_area .pot_10 {
width: 100%;
height: 100%;
}
.pot_area .pot_10:after {
content: "";
display: block;
position: absolute;
: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 225ms fite;
animation: ripple 4.5s ease-out 225ms fite;
}
.pot_area .pot_40 {
width: 100%;
height: 100%;
}
.pot_area .pot_40:after {
content: "";
display: block;
position: absolute;
: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out .9s fite;
animation: ripple 4.5s ease-out .9s fite;
}
.pot_area .pot_80 {
width: 100%;
height: 100%;
}
.pot_area .pot_80:after {
content: "";
display: block;
position: absolute;
: 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 fite;
animation: ripple 4.5s ease-out 1.8s fite;
}
@-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="pot_area" style=": 158px; left: 661px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
<p class="pot_name" style="position: absolute; : 45px; left: 65px;">北京</p>
<a href="#" target="_blank" class="pot pot_dot"></a>
<div class="pot pot_10"></div>
<div class="pot pot_40"></div>
<div class="pot pot_shadow pot_80"></div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。