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>
:root {
	--speed: 0.5s; /* change speed */
}

* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}

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

.content {
	width: 30vmin;
	height: 50vmin;
	transform: rotateY(55deg) scale3d(0.5, 1.5, 0.5);
}


.cuboid {
	--height: 8;
	--width: 30;
	--depth: 30;
	--hue: 50;
	--sat: 90%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	animation: loading var(--speed) cubic-bezier(0.4, 0, 1, 1) calc(calc(var(--speed) / 8) * -1) infinite alternate;
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
	/*border: 1px solid #0008;*/
	animation: rainbow calc(var(--speed) * 2) linear calc(calc(var(--speed) / 8) * -8) infinite;
}

@keyframes rainbow {
	   0%, 10% { filter: hue-rotate(0deg); }
	10.1%, 20% { filter: hue-rotate(36deg); }
	20.1%, 30% { filter: hue-rotate(72deg); }
	30.1%, 40% { filter: hue-rotate(108deg); }
	40.1%, 50% { filter: hue-rotate(144deg); }
	50.1%, 60%.........完整代码请登录后点击上方下载按钮下载查看