svg+css实现足球loading加载动画效果代码-html代码-BFW代码库

svg+css实现足球loading加载动画效果代码

代码语言：html

代码描述：svg+css实现足球loading加载动画效果代码

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

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

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

    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Exo&family=Dancing+Script&display=swap" rel="stylesheet">

    <style>
        #splash {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 900;
    	background-color: #0a192f;
    }
    #splash h1 {
    	color: #ccd6f6;
    	font-family: Roboto, sans-serif;
    	text-align: center;
    }
    #splash svg {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	height: 50%;
    	background: transparent;
    }
    #splash svg path {
    	animation-duration: 1s;
    	animation-name: pulse;
    	animation-iteration-count: infinite;
    	color: #64d1ff; /*40c456*/
    }
    #splash svg path.path-7 {
    	animation-delay: -1s;
    }
    #splash svg path.path-6 {
    	animation-delay: -0.875s;
    }
    #splash svg path.path-5 {
    	animation-delay: -0.75s;
    }
    #splash svg path.path-4 {
    	animation-delay: -0.625s;
    }
    #splash svg path.path-3 {
    	animation-delay: -0.5s;
    }
    #splash svg path.path-2 {
    	animation-delay: -0.375s;
    }
    #splash svg path.path-1 {
    	animation-delay: -0.25s;
    }
    #splash svg path.path-0 {
    	animation-delay: -0.125s;
    }
    
    @keyframes pulse {
    	0% {
    		opacity: 0.1;
    	}
    	30% {
    		opacity: 0.8;
    	}
    	100% {
    		opacity: 0.1;
    	}
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="splash">
        <h1>Loading...</h1>
        <svg viewBox="0 0 866 866" xmlns="http://www.w3.org/2000/svg">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164.83 151.5">
			<path class="path-0" d="M117.24,69.24A8,8,0,0,0,115.67,67c-4.88-4-9.8-7.89-14.86-11.62A4.93,4.93,0,0,0,96.93,55c-5.76,1.89-11.4,4.17-17.18,6a4.36,4.36,0,0,0-3.42,4.12c-1,6.89-2.1,13.76-3,20.66a4,4,0,0,0,1,3.07c5.12,4.36,10.39,8.61,15.68,12.76a3.62,3.62,0,0,0,2.92.75c6.29-2.66,12.52-5.47,18.71-8.36a3.49,3.49,0,0,0,1.68-2.19c1.34-7.25,2.54-14.55,3.9-22.58Z" fill="#64d1ff" />
			<path class="path-1" d="M97.55,38.68A43.76,43.76,0,0,1,98,33.44c.41-2.36-.5-3.57-2.57-4.64C91.1,26.59,87,24,82.66,21.82a6.18,6.18,0,0,0-4-.71C73.45,22.55.........完整代码请登录后点击上方下载按钮下载查看