div+css实现药丸胶囊loading加载动画效果代码-html代码-BFW代码库

div+css实现药丸胶囊loading加载动画效果代码

代码语言：html

代码描述：div+css实现药丸胶囊loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 100%, #262b2f, #000);
}

.content {
	width: 50vmin;
	height: 50vmin;
	background: #fff0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pill {
	background: #fff0;
	width: 15vmin;
	height: 40vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transform: rotate(180deg);
	animation: spin 4s linear 0s infinite;
}

@keyframes spin {
	100% { transform: rotate(-540deg);}
}

.pill .side {
	background: #f7c340;
	position: relative;
	overflow: hidden;
	width: 11vmin;
	height: 15vmin;
	border-radius: 6vmin 6vmin 0 0;
}

.pill .side + .side {
	background: #d9680c;
	border-radius: 0 0 6vmin 6vmin;
	border-top: 1vmin solid #621e1a;
	animation: open 2s ease-in-out 0s infinite;
}

@keyframes open {
	0%, 20%, 80%, 100% { margin-top: 0;	}
	30%, 70% { margin-top: 10vmin; }
}

.pill .side:before {
	content: "";
	position: absolute;
	width: 2vmin;
	height: 10vmin;
	bottom: 0;
	right: 1.5vmin;
	background: #fff2;
	border-radius: 1vmin 1vmin 0 0;
	animation: shine 1s ease-out -1s infinite alternate-reverse;
}

.pill .side + .side:before {
	bottom: inherit;
	top: 0;
	border-radius: 0 0 1vmin 1vmin;
}

.pill .side:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	border-radius: 6vmin 6vmin 0 0;
	border: 1.75vmin solid #00000022;
	border-bottom-color: #fff0;
	border-bottom-width: 0vmin;
	border-top-width: 1vmin;
	animation: shadow 1s ease -1s infinite alternate-reverse;
}

.pill .side + .side:after {
	bottom: inherit;
	top: 0;
	border-radius: 0 0 6vmin 6vmin;
	border-top-color: #fff0;
	border-top-width: 0vmin;
	border-bottom-width: 1vmin;
}

@keyframes shine {
	0%, 46% {	right: 1.5vmin;	}
	54%, 100% {	right: 7.5vmin;	}
}

@keyframes shadow {
	0%, 49.999% {	transform: rotateY(0deg);	left: 0; }
	50%, 100% {	transform: rotateY(180deg);	left: -3vmin;	}
}

.medicine {
	position: absolute;
	width: calc(100% - 6vmin);
	height: calc(100% - 12vmin);
	background: #fff0;
	border-radius: 5vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.medicine i {
	width: 1vmin;
	height: 1vmin;
	background: #47c;
	border-radius: 100%;
	position: absolute;
	a.........完整代码请登录后点击上方下载按钮下载查看