css3动画水波纹、波浪
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
font-size: 20px;
}
body{
background:#444;
}
@-webkit-keyframes opac{
from {
opacity: 1;
width:0;
height:0;
top:50%;
left:50%;
}
to {
opacity : 0;
width:100%;
height:100%;
top:0;
left:0;
}
}
.animate .w2{
/*延迟1s*/
-webkit-animation-delay:1s;
}
.animate .w3{
-webkit-animation-delay:2s;
}
.animate .w4{
-webkit-animation-delay:3s;
}
.wave{
width: 22.7rem;
height: 22.7rem;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.wave *{
border:1px solid #fff;
position:absolute;
border-radius:50%;
-webkit-animation:opac 4s infinite;
}
</style>
</head> <body>
<div class="animate wave">
<div class="w1"></div>
<div class="w2"></div>
<div class="w3"></div>
<div class="w4"></div>
</div>
</body> </html>
效果图：
2.波浪
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
body{ background-color: #522350 }
.water {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
margin:200px auto 0;
overflow: hidden;
}
.water:before,.water:after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
} .water:after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
} @keyframes rotate {
50% {
transform: translate(-50%, -70%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
} </style>
</head> <body>
<div class="water"></div>
</body> </html>
效果：
3.波浪
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
font-size: 100%;
font-style: normal
} dd,
dl,
dt,
em,
i,
p,
textarea,
a,
div {
padding: 0px;
margin: 0px;
} a {
text-decoration: none;
} img {
border: 0px;
} ul,
li {
padding: 0px;
margin: 0px;
list-style: none;
} .fl {
float: left
} .fr {
float: right
} body {
margin: 0px;
padding: 0px;
color: #000;
background: #fff;
} a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
} .none {
display: none
} .fensug {
width: 168px;
height: 168px;
background: #fff;
border: 9px #5576ac solid;
margin: 100px auto;
padding: 5px;
-webkit-border-radius: 25em;
-moz-border-radius: 25em;
border-radius: 25em;
overflow: hidden;
position: relative
} .fensug .wavenum {
width: 168px;
height: 168px;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
display: table-cell;
vertical-align: middle;
position: absolute;
left: 5px;
top: 5px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
} .fensug .wavenum b {
color: #fff;
font-size: 43px;
text-align: center;
display: block;
position: relative;
z-index: 2;
line-height: 45px;
} .fensug .wavenum tt {
color: #fff;
font-size: 20px;
text-align: center;
display: block;
position: relative;
z-index: 2;
font-weight: bold;
width: 140px;
border-top: 2px #fff solid;
margin: 3px auto;
line-height: 35px;
} .waven {
width: 168px;
height: 168px;
webkit-border-radius: 25em;
-moz-border-radius: 25em;
border-radius: 25em;
background: #5576ac;
overflow: hidden;
position: relative
} .wave {
width: 408px;
height: 80%;
position: absolute;
left: 0px;
bottom: 0;
background: url(http://www.17sucai.com/preview/5730/2018-09-20/images/images/wave.png) no-repeat;
animation: move_wave 1s linear infinite;
-webkit-animation: move_wave 1s linear infinite;
} @-webkit-keyframes move_wave {
0% {
-webkit-transform: translateX(0)
} 50% {
-webkit-transform: translateX(-25%)
} 100% {
-webkit-transform: translateX(-50%)
}
} @keyframes move_wave {
0% {
transform: translateX(0)
} 50% {
transform: translateX(-25%)
} 100% {
transform: translateX(-50%)
}
}
</style>
</head> <body>
<div class="fensug">
<div class="wavenum "><b id="denfenjs">61%</b><tt>2018 Q1</tt></div>
<div class="waven">
<div class="wave" style="height: 60%;"> </div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var waveHeight = 0;
var waveNum = 61; function waves() {
if (waveHeight < waveNum) {
$(".wave").css("height", waveHeight + "%");
waveHeight++;
}
setTimeout(function() { waves() }, 15);
} $(function() {
$("#denfenjs").html(waveNum + "%");
waves();
})
</script>
</body> </html>
效果图：
css3动画水波纹、波浪的更多相关文章
- html5 +css3 点击后水波纹扩散效果 兼容移动端
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css3动画图片波纹效果
这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- css 实现水波纹，波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- Android -- 贝塞尔实现水波纹动画（划重点！！）
1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一 ...
- CSS3 水波纹
css3 动画设置水波纹,效果如下图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- 用path动画绘制水波纹
用path动画绘制水波纹 效果 源码 // // ViewController.m // PathAnimation // // Created by YouXianMing on 15/7/3. / ...
- css3+jQuery实现按钮水波纹效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
随机推荐
- Git----远程仓库之添加远程库02
现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub上创建一个Git库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...
- Git--时光穿梭机之删除文件06
在Git中,删除也是一个修改操作,我们实际操作一下吧,先添加一个文件test.txt到Git并且提交 $ git add test.txt $ git commit -m "add test ...
- zookeeper简绍
先一句话概括下zookeeper:zookeeper可谓是目前使用最广泛的分布式组件了.其功能和职责单一,但却非常重要. zookeeper到底是什么?(技术文) 1)zookeeper实际上是yah ...
- C#泛型序列化困境
[C#泛型序列化困境] 问题的起因是这样,有一个需求,将JsonArray转化为List,JsonArray中的元素均是string,此string可被转化为int.float.或维持string.我 ...
- MonoBehaviour.OnValidate
[MonoBehaviour.OnValidate] This function is called when the script is loaded or a value is changed i ...
- 转）GPL、BSD、MIT、Mozilla、Apache和LGPL的区别
开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别 以下是上述协议的简单介绍: BSD开源协议 BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以”为所欲为”, ...
- 转载《spring定时任务轮询(spring Task)》
亲测可用 原文网址:http://blog.csdn.net/wanglha/article/details/51026697 本博主注:xmlns:task="http://www.spr ...
- java同一个类中，构造器如何调用另一个重载的构造器?
构造器里面调用其它构造器,格式方法如下:1.使用this调用另一个重载构造器,只能在构造器中使用:2.必须写在构造器执行体的第一行语句: 示例如下: import static java.lang.S ...
- 电脑清缓存（C盘占空间）
电脑缓存目录: 1.取消文件隐藏 2.找到C:\Users\lwx351192\AppData\Local\Temp目录下的三个子文件夹local,locallow,roaming里面的文件都可删除, ...
- ubuntu系统中解决github下载速度慢问题
如果你在使用github,出现访问和下载速度慢问题,可以通过修改host解决.记得不要踩坑哦!分四步: 第一步:查询速度快的IP地址 在http://tool.chinaz.com/dns中查询下面三 ...