zoukankan      html  css  js  c++  java
  • 炫酷CSS3加载动画

    <!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title></title>
    	<style>
    		html,body {
    			margin: 0;
    			padding: 0;
    			 100%;
    			height: 100%;
    			font-size: 13.3333333vw;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    		}
    		.container {
    			 2.3rem;
    			height: .3rem;
    			display: flex;
    			justify-content: space-between;
    		}
    		.container span {
    			 .3rem;
    			height: .3rem;
    			--duration: 2s;
    		}
    		.girl {
    			animation: slide var(--duration) ease-in-out infinite alternate;
    		}
    		@keyframes slide {
    			from {
    				transform: translateX(0);
    				filter: brightness(1);
    			}
    			to {
    				transform: translateX(2rem);
    				filter: brightness(1.45);
    			}
    		}
    		.boys {
    			 1.8rem;
    			display: flex;
    			justify-content: space-between;
    		}
    		.boys span {
    			animation: var(--duration) ease-in-out infinite alternate;
    		}
    		.boys span:nth-child(1) {
    			animation-name: jump-off-1;
    		}
    		.boys span:nth-child(2) {
    			animation-name: jump-off-2;
    		}
    		.boys span:nth-child(3) {
    			animation-name: jump-off-3;
    		}
    		.boys span:nth-child(4) {
    			animation-name: jump-off-4;
    		}
    		@keyframes jump-off-1 {
    			0%, 15% {
    				transform: rotate(0deg);
    			}
    			35%, 100% {
    				transform-origin: -0.1rem center;
    				transform: rotate(-180deg);
    			}
    		}
    		@keyframes jump-off-2 {
    			0%, 35% {
    				transform: rotate(0deg);
    			}
    			50%, 100% {
    				transform-origin: -.1rem center;
    				transform: rotate(-180deg);
    			}
    		}
    		@keyframes jump-off-3 {
    			0%, 50% {
    				transform: rotate(0deg);
    			}
    			65%, 100% {
    				transform-origin: -0.1rem center;
    				transform: rotate(-180deg);
    			}
    		}
    		@keyframes jump-off-4 {
    			0%, 65% {
    				transform: rotate(0deg);
    			}
    			85%, 100% {
    				transform-origin: -0.1rem center;
    				transform: rotate(-180deg);
    			}
    		}
    		.container span::before {
    			content: '';
    			position: absolute;
    			 inherit;
    			height: inherit;
    			border-radius: 15%;
    			box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.3);
    		}
    		.girl::before {
    			background-color: hotpink;
    		}
    		.boys span::before {
    			background-color: dodgerblue;
    			animation: var(--duration) ease-in-out infinite alternate;
    		}
    		.boys span:nth-child(1)::before {
    			filter: brightness(1);
    			animation-name: jump-down-1;
    		}
    		.boys span:nth-child(2)::before {
    			filter: brightness(1.15);
    			animation-name: jump-down-2;
    		}
    		.boys span:nth-child(3)::before {
    			filter: brightness(1.3);
    			animation-name: jump-down-3;
    		}
    		.boys span:nth-child(4)::before {
    			filter: brightness(1.45);
    			animation-name: jump-down-4;
    		}
    		@keyframes jump-down-1 {
    			5% {
    				transform: scale(1, 1);
    			}
    			15% {
    				transform-origin: center bottom;
    				transform: scale(1.3, 0.7);
    			}
    			22.5%, 27.5% {
    				transform-origin: center center;
    				transform: scale(0.8, 1.4);
    			}
    			35% {
    				transform-origin: center top;
    				transform: scale(1.3, 0.7);
    			}
    			45%, 100% {
    				transform: scale(1, 1);
    			}
    		}
    		@keyframes jump-down-2 {
    			25% {
    				transform: scale(1, 1);
    			}
    			35% {
    				transform-origin: center bottom;
    				transform: scale(1.3, 0.7);
    			}
    			41.25%, 43.75% {
    				transform-origin: center center;
    				transform: scale(0.8, 1.4);
    			}
    			50% {
    				transform-origin: center top;
    				transform: scale(1.3, 0.7);
    			}
    			60%, 100% {
    				transform: scale(1, 1);
    			}
    		}
    		@keyframes jump-down-3 {
    			40% {
    				transform: scale(1, 1);
    			}
    			50% {
    				transform-origin: center bottom;
    				transform: scale(1.3, 0.7);
    			}
    			56.25%, 58.75% {
    				transform-origin: center center;
    				transform: scale(0.8, 1.4);
    			}
    			65% {
    				transform-origin: center top;
    				transform: scale(1.3, 0.7);
    			}
    			75%, 100% {
    				transform: scale(1, 1);
    			}
    		}
    		@keyframes jump-down-4 {
    			55% {
    				transform: scale(1, 1);
    			}
    			65% {
    				transform-origin: center bottom;
    				transform: scale(1.3, 0.7);
    			}
    			72.5%, 77.5% {
    				transform-origin: center center;
    				transform: scale(0.8, 1.4);
    			}
    			85% {
    				transform-origin: center top;
    				transform: scale(1.3, 0.7);
    			}
    			95%, 100% {
    				transform: scale(1, 1);
    			}
    		}
    	</style>
    </head>
    <body>
    
    <div class="container">
    	<span class="girl"></span>
    	<div class="boys">
    		<span></span>
    		<span></span>
    		<span></span>
    		<span></span>
    	</div>
    </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    html基础之html标签
    unittest框架(二)单元测试及测试报告
    unittest框架(一)用例管理
    python实现http接口自动化测试(完善版)
    python学习笔记(二十九)为什么python的多线程不能利用多核CPU
    深入理解JVM(三)——配置参数
    深入理解JVM(二)——内存模型、可见性、指令重排序
    深入理解JVM(一)——基本原理
    做了两款数据库监控工具,打算在近期开源
    电商系统中的商品模型的分析与设计—续
  • 原文地址:https://www.cnblogs.com/QQPrincekin/p/11778551.html
Copyright © 2011-2022 走看看