svg+css实现指尖陀螺仪loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:svg+css实现指尖陀螺仪loading加载动画效果代码

代码标签: svg css 指尖 陀螺仪 loading 加载 动画

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

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

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
	background: #9148F6;
	overflow: hidden;
}
svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 250px;
	width: 250px;
}
.spinner {
	fill: #A1EA2A;
}
.spinner:nth-of-type(2) {
	fill: #C47BC3;
}
.spinner:nth-of-type(3) {
	fill:#F7AE90;
}
.spinner:nth-of-type(4) {
	fill: #D4E15D;
}
</style>


  
  
</head>

<body translate="no">
  <svg viewBox="0 0 250 250">
	<g transform="translate(75 75)" class="spinner">
		<g>
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0