HTML+CSS3 5個炫酷的loading

為了友善大家友善CV，每個loading對應一個html檔案。

檔案下載下傳壓縮包，下載下傳位址：

https://download.csdn.net/download/m0_48850204/20432352?spm=1001.2014.3001.5501

效果如圖：

HTML+CSS3 5個炫酷的loading

代碼如下

loading1

<!DOCTYPE html>
<html >

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阿玉寫loading loading1</title>
	<style type="text/css">
		*,
		*:after,
		*:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
			background-color: #494a5f;

		}



		.nav {
			width: 100%;
			padding-bottom: 1.2em;
			position: absolute;
			z-index: 99;
			color: white;
			display: flex;
			justify-content: center;
		}

		.nav a {
			color: #fff;
			text-decoration: none;
		}
		.nav a {
			display: inline-block;
			margin: 0.5em;
			padding: 0.6em 1em;
			border: 3px solid #fff;
			font-weight: 700;
		}

		.nav a:hover {
			opacity: 0.6;
			cursor: pointer;
		}

		.nav a.current {
			background: #1d7db1;
			color: #fff;
		}

	

		.htmleaf-container {
			height: 100%;
			position: relative;
			min-height: 200px;
		}

		.loader {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 56px;
			height: 50px;
			perspective: 100px;
			perspective-origin: 50% 100%;
			transform-style: preserve-3d;
			transform: translateZ(-1px);

		}

		.loader .loader-inner {
			width: 50%;
			height: 100%;
			background: #fff;
			border: 3px solid #b93be6;
			position: absolute;
			right: 0;
			transform-origin: 0% 100%;
		}

		.loader .loader-inner:first-child {
			left: 0;
		}

		.loader .loader-inner hr {
			margin: 3px 3px 6px;
			border: 1px solid #b93be6;
		}

		.loader .loader-inner.box {
			-webkit-animation: loading-1 3.6s infinite ease-in-out;
			animation: loading-1 3.6s infinite ease-in-out;
		}

		.loader .loader-inner.box-1 {
			animation-delay: .2s;
		}

		.loader .loader-inner.box-2 {
			animation-delay: .4s;
		}

		.loader .loader-inner.box-3 {
			animation-delay: 0.6s;
		}

		.loader .loader-inner.box-4 {
			animation-delay: 0.8s;
		}

		.loader .loader-inner.box-5 {
			animation-delay: 1.8s;
		}

		.loader .loader-inner.box-6 {
			animation-delay: 2.2s;
		}

		@-webkit-keyframes loading-1 {

			25%,
			100% {
				transform: translateX(3px) rotateY(-180deg);
			}
		}

		@keyframes loading-1 {

			25%,
			100% {
				transform: translateX(3px) rotateY(-180deg);
			}
		}
	</style>
</head>

<body>
	<div class="nav">
		<a href="./loading1.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="current">loading1</a>
		<a href="./loading2.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >loading2</a>
		<a href="./loading3.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading3</a>
		<a href="./loading4.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading4</a>
		<a href="./loading5.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading5</a>
	</div>
	<div class="htmleaf-container">
		<div class="loader">
			<div class="loader-inner">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner box box-1">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner box box-2">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner box box-3">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner box box-4">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner box box-5">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner box box-6">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
			<div class="loader-inner">
				<hr>
				<hr>
				<hr>
				<hr>
				<hr>
			</div>
		</div>
	</div>
</body>

</html>

loading2

<!DOCTYPE html>
<html >

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阿玉寫loading loading2</title>
	<style type="text/css">
		*,
		*:after,
		*:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		html,
		body {
			height: 100%;
			background-color: #3c2f49;
		}
		.nav {
			width: 100%;
			padding-bottom: 1.2em;
			position: absolute;
			z-index: 99;
			color: white;
			display: flex;
			justify-content: center;
		}

		.nav a {
			color: #fff;
			text-decoration: none;
		}
		.nav a {
			display: inline-block;
			margin: 0.5em;
			padding: 0.6em 1em;
			border: 3px solid #fff;
			font-weight: 700;
		}

		.nav a:hover {
			opacity: 0.6;
			cursor: pointer;
		}

		.nav a.current {
			background: #1d7db1;
			color: #fff;
		}
		.htmleaf-container {
			height: 100%;
			position: relative;
			min-height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.loader {
			width: 64px;
			height: 64px;
			line-height: 64px;
			border-radius: 50%;
			border-top: 5px solid #eb6c18;
			color: #fff;
			text-align: center;
			-webkit-animation: 2s loading1 ease-in-out infinite;
			animation: 2s loading1 ease-in-out infinite;
		}

		.loader:before,
		.loader:after {
			content: "";
			display: block;
			width: 64px;
			height: 64px;
			border-radius: 50%;
			position: absolute;
			top: -5px;
			left: 0;
		}

		.loader:before {
			border-top: 5px solid #c3c659;
			-webkit-transform: rotate(120deg);
			transform: rotate(120deg)
		}

		.loader:after {
			border-top: 5px solid #b93be6;
			-webkit-transform: rotate(240deg);
			transform: rotate(240deg)
		}

		.loader .loader-inner {
			font-size: 12px;
			color: #b93be6;
			display: block;
			width: 64px;
			height: 64px;
			position: absolute;
			top: -5px;
			left: 0;
			-webkit-animation: 2s loading2 linear infinite;
			animation: 2s loading2 linear infinite;
		}

		@-webkit-keyframes loading1 {
			50% {
				-webkit-transform: rotate(180deg)
			}

			100% {
				-webkit-transform: rotate(360deg)
			}
		}

		@keyframes loading1 {
			50% {
				-webkit-transform: rotate(180deg);
				transform: rotate(180deg)
			}

			100% {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg)
			}
		}

		@-webkit-keyframes loading2 {
			50% {
				-webkit-transform: rotate(-180deg)
			}

			100% {
				-webkit-transform: rotate(-360deg)
			}
		}

		@keyframes loading2 {
			50% {
				-webkit-transform: rotate(-180deg);
				transform: rotate(-180deg)
			}

			100% {
				-webkit-transform: rotate(-360deg);
				transform: rotate(-360deg)
			}
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="./loading1.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading1</a>
		<a href="./loading2.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="current">loading2</a>
		<a href="./loading3.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading3</a>
		<a href="./loading4.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading4</a>
		<a href="./loading5.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading5</a>
	</div>
	<div class="htmleaf-container">
		<div class="loader">
			<span class="loader-inner">加載中...</span>
		</div>
	</div>
</body>

</html>

loading3

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阿玉寫loading loading3</title>

	<style type="text/css">
		*,
		*:after,
		*:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		html,
		body {
			height: 100%;
			padding: 0;
			margin: 0;
		}
	
		.htmleaf-container {
			font-size: 12px;
			height: 100%;
			position: relative;
			min-height: 200px;
		}
		.htmleaf-container .nav {
			width: 100%;
			padding-bottom: 1.2em;
			position: absolute;
			z-index: 99;
			color: white;
			display: flex;
			justify-content: center;
		}
		
		.nav {
			width: 100%;
			padding-bottom: 1.2em;
			position: absolute;
			z-index: 99;
			color: white;
			display: flex;
			justify-content: center;
			background-color: black;
		}
		.nav a {
			color: #fff;
			text-decoration: none;
			
		}
		.nav a {
			display: inline-block;
			margin: 0.5em;
			padding: 0.6em 1em;
			border: 3px solid #fff;
			font-weight: 700;
		}

		.nav a:hover {
			opacity: 0.6;
			cursor: pointer;
		}

		.nav a.current {
			background: #1d7db1;
			color: #fff;
		}
		.loader {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 60px;
		}

		.loader .my-loading {
			position: relative;
			width: 100%;
			height: 10px;
			border: 1px solid #30B08F;
			border-radius: 10px;
			animation: turn 2s linear 0.85s infinite;
		}

		.loader .my-loading:before {
			content: "";
			display: block;
			position: absolute;
			width: 0%;
			height: 100%;
			background: #30B08F;
			box-shadow: 10px 0px 15px 0px #30B08F;
			animation: load 1s linear infinite;
		}

		.loader .my-loading-text {
			width: 100%;
			position: absolute;
			top: 10px;
			color: #30B08F;
			text-align: center;
			animation: bounce 1s linear infinite;
		}

		@keyframes load {
			0% {
				width: 0%;
			}

			87.5%,
			100% {
				width: 100%;
			}
		}

		@keyframes turn {
			0% {
				transform: rotateY(0deg);
			}

			6.25%,
			50% {
				transform: rotateY(180deg);
			}

			56.25%,
			100% {
				transform: rotateY(360deg);
			}
		}

		@keyframes bounce {

			0%,
			100% {
				top: 10px;
			}

			12.5% {
				top: 30px;
			}
		}
	</style>
</head>

<body>
	<div class="nav">
		<a href="./loading1.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading1</a>
		<a href="./loading2.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading2</a>
		<a href="./loading3.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="current">loading3</a>
		<a href="./loading4.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading4</a>
		<a href="./loading5.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading5</a>
	</div>
	<div class="htmleaf-container">
	
		<div class="loader">
			<div class="my-loading"></div>
			<div class="my-loading-text">加載中...</div>
		</div>
	</div>
</body>

</html>

loading4


<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阿玉寫loading loading4</title>
    <style>
        *{
            margin: 0;
            padding-left: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #fff;
        }
        .container{
            position: relative;
            /* -webkit-box-reflect:below 1px liner-gradient(transparent,#0001); */

        }
        .nav {
			width: 100%;
			padding-bottom: 1.2em;
			position: absolute;
			z-index: 99;
            top: 0;
			color: white;
			display: flex;
			justify-content: center;
            background-color: #494a5f;
		}

        .nav a {
			color: #fff;
			text-decoration: none;
		}
		.nav a {
			display: inline-block;
			margin: 0.5em;
			padding: 0.6em 1em;
			border: 3px solid #fff;
			font-weight: 700;
		}

		.nav a:hover {
			opacity: 0.6;
			cursor: pointer;
		}

		.nav a.current {
			background: #1d7db1;
			color: #fff;
		}
        .container .loader{
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border:5px solid transparent;
            border-bottom-color:#468cf1;
            border-right-color: #e64e7c;
            transform: rotate(45deg);
            animation:animate 2s ease-in-out infinite;
        }
        @keyframes animate {
            0%{
                transform:rotate(0deg);
                border-right-color: #e64e7c;
                border-bottom-color:#468cf1;
            }
            50%{
                transform: rotate(90deg);
                border-right-color: #468cf1;
                border-bottom-color:#e64e7c;
            }
            100%{
                transform: rotate(0deg);
                border-bottom-color:#468cf1;; 
                border-right-color: #e64e7c;
            }
        }
    
        .container .loader .ball{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: animateBall 2s ease-in-out infinite;
        }
        @keyframes animateBall {
            0%{
                transform:rotate(0deg);

            }
            50%{
                transform: rotate(180deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
        .container .loader .ball::before{
            content: '';
            position: absolute;
            bottom: 50%;
            right: 2px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            transform: translateY(-50%);
            animation:animateBallBgColor 1s ease-in-out infinite;
        }
        @keyframes animateBallBgColor {
            0%{
                background-color:#e64e7c; 
            }
            50%{
                background-color:#468cf1;
            }
            100%{
                background-color:#e64e7c; 
            }
        }
    </style>
</head>
<body>
            <div class="nav">
			<a href="./loading1.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading1</a>
			<a href="./loading2.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading2</a>
			<a href="./loading3.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading3</a>
			<a href="./loading4.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="current">loading4</a>
            <a href="./loading5.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading5</a>
		</div>
    <div class="container">

        <div class="loader">
            <div class="ball">

            </div>
        </div>
    </div>
</body>
</html>

loading5

<!DOCTYPE html>
<html >

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阿玉寫loading loading5</title>
    <style>
        body{
            background-color:#142535 ;
        }
        .nav {
			width: 100%;
			padding-bottom: 1.2em;
			position: absolute;
			z-index: 99;
            top: 0;
			color: white;
			display: flex;
			justify-content: center;
		}

        .nav a {
			color: #fff;
			text-decoration: none;
		}
		.nav a {
			display: inline-block;
			margin: 0.5em;
			padding: 0.6em 1em;
			border: 3px solid #fff;
			font-weight: 700;
		}

		.nav a:hover {
			opacity: 0.6;
			cursor: pointer;
		}

		.nav a.current {
			background: #1d7db1;
			color: #fff;
		}
        .loader-box{
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loader-block{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-items: center;
        }
        .loader {
            font-size: 8px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            animation: load-effect 1s infinite linear;
            color: aqua;
        }
        .loading-text{
            color: aqua;
            font-size: 12px;
            padding: 10px;
            height: 24px;
            margin-top: 20px;
        }
        @keyframes load-effect {
            0% {
                box-shadow:
                    0 -3em 0 .2em aqua,
                    /*上*/

                    2em -2em 0 0 aqua,
                    /*右上*/

                    3em 0 0 -.5em aqua,
                    /*右*/

                    2em 2em 0 -.5em aqua,
                    /*右下*/

                    0 3em 0 -.5em aqua,
                    /*下*/

                    -2em 2em 0 -.5em aqua,
                    /*左下*/

                    -3em 0 0 -.5em aqua,
                    /*左*/

                    -2em -2em 0 0 aqua;
                /*左上*/
            }

            12.5% {
                box-shadow:
                    0 -3em 0 0 aqua,

                    2em -2em 0 .2em aqua,

                    3em 0 0 0 aqua,

                    2em 2em 0 -.5em aqua,

                    0 3em 0 -.5em aqua,

                    -2em 2em 0 -.5em aqua,

                    -3em 0 0 -.5em aqua,

                    -2em -2em 0 -.5em aqua;
            }

            25% {
                box-shadow:

                    0 -3em 0 -.5em aqua,

                    2em -2em 0 0 aqua,

                    3em 0 0 .2em aqua,

                    2em 2em 0 0 aqua,

                    0 3em 0 -.5em aqua,

                    -2em 2em 0 -.5em aqua,

                    -3em 0 0 -.5em aqua,

                    -2em -2em 0 -.5em aqua;
            }

            37.5% {
                box-shadow:

                    0 -3em 0 -.5em aqua,

                    2em -2em 0 -.5em aqua,

                    3em 0 0 0 aqua,

                    2em 2em 0 .2em aqua,

                    0 3em 0 0 aqua,

                    -2em 2em 0 -.5em aqua,

                    -3em 0 0 -.5em aqua,

                    -2em -2em 0 -.5em aqua;
            }

            50% {
                box-shadow:

                    0 -3em 0 -.5em aqua,

                    2em -2em 0 -.5em aqua,

                    3em 0 0 -.5em aqua,

                    2em 2em 0 0 aqua,

                    0 3em 0 .2em aqua,

                    -2em 2em 0 0 aqua,

                    -3em 0 0 -.5em aqua,

                    -2em -2em 0 -.5em aqua;
            }

            62.5% {
                box-shadow:

                    0 -3em 0 -.5em aqua,

                    2em -2em 0 -.5em aqua,

                    3em 0 0 -.5em aqua,

                    2em 2em 0 -.5em aqua,

                    0 3em 0 0 aqua,

                    -2em 2em 0 .2em aqua,

                    -3em 0 0 0 aqua,

                    -2em -2em 0 -.5em aqua;
            }

            75% {
                box-shadow:
                    0 -3em 0 -.5em aqua,

                    2em -2em 0 -.5em aqua,

                    3em 0 0 -.5em aqua,

                    2em 2em 0 -.5em aqua,

                    0 3em 0 -.5em aqua,

                    -2em 2em 0 0 aqua,

                    -3em 0 0 .2em aqua,

                    -2em -2em 0 0 aqua;
            }

            87.5% {
                box-shadow:

                    0 -3em 0 0 aqua,

                    2em -2em 0 -.5em aqua,

                    3em 0 0 -.5em aqua,

                    2em 2em 0 -.5em aqua,

                    0 3em 0 -.5em aqua,

                    -2em 2em 0 0 aqua,

                    -3em 0 0 0 aqua,

                    -2em -2em 0 .2em aqua;
            }

            100% {
                box-shadow:
                    0 -3em 0 .2em aqua,

                    2em -2em 0 0 aqua,

                    3em 0 0 -.5em aqua,

                    2em 2em 0 -.5em aqua,

                    0 3em 0 -.5em aqua,

                    -2em 2em 0 -.5em aqua,

                    -3em 0 0 -.5em aqua,

                    -2em -2em 0 0 aqua;
            }
        }

        @keyframes flip-wave-0 {
    0% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    10% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

 .loading-filp  :nth-child(20n+0) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-0;
    animation-iteration-count: infinite
}

@keyframes flip-wave-1 {
    10% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    15% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}
  .loading-filp :nth-child(20n+1) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-1;
    animation-iteration-count: infinite
}

@keyframes flip-wave-2 {
    15% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    20% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+2) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-2;
    animation-iteration-count: infinite
}

@keyframes flip-wave-3 {
    20% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    25% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+3) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-3;
    animation-iteration-count: infinite
}

@keyframes flip-wave-4 {
    25% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    30% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+4) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-4;
    animation-iteration-count: infinite
}

@keyframes flip-wave-5 {
    30% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    35% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+5) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-5;
    animation-iteration-count: infinite
}

@keyframes flip-wave-6 {
    35% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    40% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+6) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-6;
    animation-iteration-count: infinite
}

@keyframes flip-wave-7 {
    40% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    45% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+7) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-7;
    animation-iteration-count: infinite
}

@keyframes flip-wave-8 {
    45% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    50% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+8) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-8;
    animation-iteration-count: infinite
}

@keyframes flip-wave-9 {
    50% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    55% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+9) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-9;
    animation-iteration-count: infinite
}

@keyframes flip-wave-10 {
    55% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    60% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+10) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-10;
    animation-iteration-count: infinite
}

@keyframes flip-wave-11 {
    60% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    65% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+11) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-11;
    animation-iteration-count: infinite
}

@keyframes flip-wave-12 {
    65% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    70% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+12) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-12;
    animation-iteration-count: infinite
}

@keyframes flip-wave-13 {
    70% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    75% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+13) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-13;
    animation-iteration-count: infinite
}

@keyframes flip-wave-14 {
    75% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    80% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+14) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-14;
    animation-iteration-count: infinite
}

@keyframes flip-wave-15 {
    80% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    85% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+15) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-15;
    animation-iteration-count: infinite
}

@keyframes flip-wave-16 {
    85% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    90% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+16) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-16;
    animation-iteration-count: infinite
}

@keyframes flip-wave-17 {
    90% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    95% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+17) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-17;
    animation-iteration-count: infinite
}

@keyframes flip-wave-18 {
    95% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+18) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-18;
    animation-iteration-count: infinite
}

@keyframes flip-wave-19 {
    100% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    105% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.loading-filp :nth-child(20n+19) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-19;
    animation-iteration-count: infinite
}

    </style>
</head>

<body>
    <div class="nav">
        <a href="./loading1.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading1</a>
        <a href="./loading2.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading2</a>
        <a href="./loading3.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >loading3</a>
        <a href="./loading4.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >loading4</a>
        <a href="./loading5.html" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="current">loading5</a>
    </div>
    <div class="loader-box">
        <div class="loader-block">
            <div class="loader">
            </div>
            <div class="loading-text">正在加載中....</div>
        </div>
        </div>
   
  
</body>
<script> 
var n = document.getElementsByClassName('loading-text');
var loader = document.getElementsByClassName('loader');
console.log(n)
let className =""
className ="loading-filp"
function getClassName() {
    if(className === 'loading-filp'){
    n[0].classList.remove('loading-bounce')
    }else{
    n[0].classList.remove('loading-filp')
    }
    n[0].classList.add(className)
    changeLoading()
}
getClassName()
    function changeLoading () {
        if(!className) return;
    for (var e = 0, t = n.length; e < t; e++) {
        var a = n[e],
            r = a.textContent.trim();
        a.innerHTML = null;
        i(a, r)
    }
}
    function i(n, e) {
        for (var t in e) {
            var a = document.createElement("span");
            a.innerHTML = e[t] === " " ? "&nbsp;" : e[t];
            n.appendChild(a)
        }
    }
</script>
</html>

HTML+CSS3 5個炫酷的loading

loading1

loading2

loading3

loading4

loading5

繼續閱讀

magin 負值

【CSS3】設定超連結樣式超連結樣式

CSS顔色搭配（超級贊的幾個網站）ColorSpaceWebGradientsGRADIENT BUTTONSUigradientsCoolHue 2.0EggradientsGradientaMesh GradientCool BackgroundDuotones

分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關

H5測試點

談談css的僞類和僞元素

用 Canvas 編織璀璨星空圖

HTML5Canvas 酷炫效果

龍珠訓練營task04

十大酷炫屌的圖像懸停特效

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

vue3 transitionvue3 transition元件和vue2 transition元件

layui多任務上傳添加進度條