主要是用css3中的animation和keyframeshttp://www.w3school.com.cn/cssref/pr_animation.asp
先上效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>css波纹</title>
</head>
<style>
*{margin;0;padding: 0}
.main{
width: 85px;
height:85px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%); /* IE 9 */
-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
}
.round{
width: 10px;
height: 10px;
border-radius: 50%;
border:2px solid rgba(0, 205, 236, 0.37);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%); /* IE 9 */
-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
}
.r1{
animation:myfirst 5s infinite ;
-webkit-animation:myfirst 5s infinite ;/* Safari and Chrome */
}
.r2{
animation:myfirst2 5s infinite 0.5s;
-webkit-animation:myfirst2 5s infinite 0.5s;/* Safari and Chrome */
}
.r3{
animation:myfirst3 5s infinite 1s;
-webkit-animation:myfirst3 5s infinite 1s;/* Safari and Chrome */
}
@keyframes myfirst{
from {opacity: 1}
to {width:85px;height: 85px;opacity: 0}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst{
from {opacity: 1}
to {width:85px;height: 85px;opacity: 0}
}
@keyframes myfirst2{
from {opacity: 1}
to {width:85px;height: 85px;opacity: 0}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst2{
from {opacity: 1}
to {width:85px;height: 85px;opacity: 0}
}
@keyframes myfirst3{
from {opacity: 1}
to {width:85px;height: 85px;opacity: 0}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst3{
from {opacity: 1}
to {width:85px;height: 85px;opacity: 0}
}
</style>
<body>
<div class="main center">
<div class="round" style="background:#6AD7E9;">
<div class="round r1"></div>
<div class="round r2"></div>
<div class="round r3"></div>
</div>
</div>
</body>
<script>
</script>
</html>
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
