<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 SVG带虹吸现象的日食动画</title>
<style>
body {
background: #BBDEFB;
animation: sky 20s infinite linear;
}
.blobs {
filter: url('#goo');
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.one {
left: 50%;
animation: moon 20s infinite linear;
}
.four {
left: calc(50% - 50px);
transform: scale(0.5);
animation: loader 20s infinite ease;
filter: blur(25px);
opacity: 1 !important;
background: rgba(255, 255, 255, 1) !important;
}
@-webkit-keyframes loader {
0% {
transform: translate(500px, 0px) scale(0.9);
}
25% {
transform: translate(45px, 0px) scale(0.9);
}
50% {
transform: translate(-375px, 0px) scale(0.9);
}
75% {
transform: translate(45px, 0px) scale(0.9);
}
100% {
transform: translate(500px, 0px) scale(0.9);
}
}
@-webkit-keyframes moon {
0% {
background-position: 100% 50%;
}
17% {
background-position: 50% 50%;
}
25% {
background-position: 50% 50%;
}
50% {
background-position: 0% 50%;
}
67% {
background-position: 50% 50%;
}
75% {
background-position: 50% 50%;
}
100% {
background-position: 100% 50%;
}
}
@-webkit-keyframes sky {
0% {
background: #BBDEFB;
}
17.5% {
background: #07202C;
}
25% {
background: #07202C;
}
50% {
background: #BBDEFB;
}
67.5% {
background: #07202C;
}
75% {
background: #07202C;
}
100% {
background: #BBDEFB;
}
}
.blob {
position: fixed;
background: linear-gradient(90deg, #fff, #ECEFF1, #CFD8DC, #263238, #263238, #CFD8DC, #ECEFF1, #fff);
background-size: 1000% 1000%;
top: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
font-size: 40px;
border-radius: 100%;
margin-top: -50px;
margin-left: -50px;
}
.norm {
filter: blur(1px);
}
</style>
</head>
<body>
<div class="blobs">
<div class="blob four move"></div>
<div class="norm blob one"></div>
</div>
<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
</body>
</html>
