css3 圆形动画背景缩略图
<div class="uc-circle-a"></div>
<div class="uc-circle-b"></div>

.uc-circle-a{
	position: absolute;
	top: -190px;
	left: -150px;
	width: 304px;
	height: 304px;
	background: rgba(255,255,255,0.34);
	animation: fdd 5s 0s linear infinite alternate
}
.uc-circle-b{
	position: absolute;
	bottom: -140px;
	right: -150px;
	width: 304px;
	height: 304px;
	background: rgba(255,255,255,0.43);
	animation: fdd 6s 0s linear infinite alternate
}

@keyframes fdd { 
    0%{
        transform:scale(.94);
		border-radius: 160px;
		opacity: 1;
    }
    100%{
        transform:scale(1.04);
		border-radius: 130px;
		opacity: .5;
    }
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注