CSS实现运动光环

标签：osi   延迟   delay   css   key   init   meta   index   dem   

css实现运动光环的小Demo
效果图:

实现代码:

代码分析:
Demo用到知识点:
1.CSS的常用选择器,transform属性居中
2.css的动画效果,动画延迟,
3.filer:模糊
HTML结构:

CSS代码:

*{
	margin: 0px;
	padding: 0px;
}
body{
	/* background-color: #050604; */
	background-image: url(‘http://pic.netbian.com/uploads/allimg/170904/155001-150451140195fd.jpg‘);
	/* background-repeat:repeat-x; */
	background-size: 100% ;
}
ul{
	list-style: none;
	}
ul li{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: yellow;
	width: 400px;
	height: 400px;
	border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
	animation: ani 30s linear infinite;
	filter: blur(5px);
	mix-blend-mode: screen;
}
ul li:nth-of-type(2){
	background-color: purple;
	animation-delay: -10s;
}
ul li:nth-of-type(3){
	background-color: blue;
	animation-delay: -20s;
}
@keyframes ani{
	from{
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to{
		transform: translate(-50%,-50%) rotate(360deg);
	}
}
.box::after{
	content: ‘‘;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #000000;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	z-index: 20;
	
}

CSS实现运动光环

标签：osi   延迟   delay   css   key   init   meta   index   dem   

原文地址：https://www.cnblogs.com/HelloBytes/p/13095417.html