Html
    Css
    Js

    
                        
html,body{
	background:#000;
	margin:0;
}
.centered{
	width:400px;
	height:400px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#000;
	filter: blur(10px) contrast(20);
}
.blob-1,.blob-2{
	width:70px;
	height:70px;
	position:absolute;
	background:#fff;
	border-radius:50%;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
}
.blob-1{
	left:20%;
	animation:osc-l 2.5s ease infinite;
}
.blob-2{
	left:80%;
	animation:osc-r 2.5s ease infinite;
	background:#0ff;
}
@keyframes osc-l{
	0%{left:20%;}
	50%{left:50%;}
	100%{left:20%;}
}
@keyframes osc-r{
	0%{left:80%;}
	50%{left:50%;}
	100%{left:80%;}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css加载动画

更新时间:2022-05-13 01:36:48

0