方块折叠旋转loading加载动画效果代码-html代码-BFW代码库

方块折叠旋转loading加载动画效果代码

代码语言：html

代码描述：方块折叠旋转loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
        	--light-color: #fff;
        	--mid-color: #999;
        	--dark-color: #111;
        	--size: 30; 
        	--trans: ease;
        }
        
        body {
        	height: 100vh;
        	margin: 0;
        	padding: 0;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	background: #ccc;
        }
        
        .container {
        	width: calc(var(--size) * 1vmin);
        	height: calc(var(--size) * 1vmin);
        	position: relative;
        }
        
        .container:before {
        	content: "";
        	background: var(--mid-color);
        	width: 50%;
        	height: 50%;
        	position: absolute;
        	left: 0%;
        	top: 0%;	
        	transform-origin: right bottom;
        	animation: shadow 4s var(--trans) 0s infinite;
        }	
        
        .container:after {
        	content: "";
        	background: var(--mid-color);
        	width: 33.33%;
        	height: 33.33%;
        	position: absolute;
        	left: 50%;
        	top: 16.66%;
        	transform-origin: left bottom;
        	animation: shadow 4s var(--trans) 1s infinite;
        	transform: scale(0);
        	z-index: -1;
        }
        
        .loader {
        	width: calc(var(--size) * 0.5vmin);
        	height: calc(var(--size) * 0.5vmin);
        	background: var(--dark-color);
        	transform-origin: right bottom;
        	animation: outer 4s var(--trans) 0s infinite;
        	position: relative;
        }
        
        .loader span {
        	width: 50%;
        	height: 50%;
        	display: block;
        	background: var(--light-color);	
        	transform-origin: right bottom;
        	animation: inner 1s eas.........完整代码请登录后点击上方下载按钮下载查看