日常前端开发中,离不开花样繁多的css3渐变特效ui,今天和大家分享一哈,css3多种径向渐变函数重叠实现小圆圈特效。
效果图
【HTML代码】
<div class="radial-gradient-many"></div>
【body css】
body {
height: 100vh;
background-color: var(--bg--);
}
【效果css】
.radial-gradient-many {
background-color: #321575;
background-image: radial-gradient(circle closest-side at 13% 50%, #e73c7e, transparent),
radial-gradient(circle closest-side at 60% 83%, #d59b15, transparent),
radial-gradient(circle closest-corner at 51% -123%, #ba5179, transparent),
radial-gradient(circle at 35% 156%, #e73c7e 28%, transparent 35%);
position: relative;
overflow: hidden;
}
.radial-gradient-many::before {
content: "";
width: 100%;
height: 100%;
background-image:radial-gradient(circle closest-side at 90% 63%, #59cfe6, transparent);
position: absolute;
top: 0;
left: 0;
animation: radialCircle 5s linear infinite;
}
@keyframes radialCircle {
from {
transform: translateY(-100%);
}
to {
transform: translateY(100%);
}
}
好了今天分享到此结束了,更多关于css3渐变视频教程请前往布衣前端独家B zhan主页获取。