Loading… – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <title>The goddess is coming</title> <style> body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } .container { width: 8em; height: 1em; font-size: 35px; display: flex; justify-content: space-between; } .container span { width: 1em; height: 1em; --duration: 1.5s; } .girl { animation: slide var(--duration) ease-in-out infinite alternate; } @keyframes slide { from { transform: translateX(0); filter: brightness(1); } to { transform: translatex(calc(8em - (1em * 1.25))); filter: brightness(1.45); } } .boys { width: 6em; 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: -50% center; transform: rotate(-180deg); } } @keyframes jump-off-2 { 0%, 30% { transform: rotate(0deg); } 50%, 100% { transform-origin: -50% center; transform: rotate(-180deg); } } @keyframes jump-off-3 { 0%, 45% { transform: rotate(0deg); } 65%, 100% { transform-origin: -50% center; transform: rotate(-180deg); } } @keyframes jump-off-4 { 0%, 60% { transform: rotate(0deg); } 80%, 100% { transform-origin: -50% center; transform: rotate(-180deg); } } .container span::before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 15%; box-shadow: 0 0 0.1em 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); } 20%, 25% { transform-origin: center bottom; transform: scale(0.8, 1.4); } 40% { transform-origin: center top; transform: scale(1.3, 0.7); } 55%, 100% { transform: scale(1, 1); } } @keyframes jump-down-2 { 20% { transform: scale(1, 1); } 30% { transform-origin: center bottom; transform: scale(1.3, 0.7); } 35%, 40% { transform-origin: center bottom; transform: scale(0.8, 1.4); } 55% { transform-origin: center top; transform: scale(1.3, 0.7); } 70%, 100% { transform: scale(1, 1); } } @keyframes jump-down-3 { 35% { transform: scale(1, 1); } 45% { transform-origin: center bottom; transform: scale(1.3, 0.7); } 50%, 55% { transform-origin: center bottom; transform: scale(0.8, 1.4); } 70% { transform-origin: center top; transform: scale(1.3, 0.7); } 85%, 100% { transform: scale(1, 1); } } @keyframes jump-down-4 { 50% { transform: scale(1, 1); } 60% { transform-origin: center bottom; transform: scale(1.3, 0.7); } 65%, 70% { transform-origin: center bottom; transform: scale(0.8, 1.4); } 85% { transform-origin: center top; transform: scale(1.3, 0.7); } 100%, 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>  <script> </script> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Loading...</title> <style type="text/css"> /*@import url(https://fonts.googleapis.com/css?family=Raleway:100);*/ /*https://codepen.io/simoncla/pen/FBoqA*/ body{ background:#222; margin:50px 300px; } h1{ color:#4a8df8; font-family: 'Raleway', cursive; font-weight:100; font-stretch:normal; font-size:4em; } .slider{ position:absolute; width:400px; height:2px; margin-top:-30px } .line{ position:absolute; background:#4a8df8; width:400px; height:2px; } .break{ position:absolute; background:#222; width:6px; height:2px; } .dot1{ animation: loading 2s infinite;} .dot2{ animation: loading 2s 0.5s infinite; } .dot3{ animation: loading 2s 1s infinite; } @-webkit-keyframes "loading" { from { left: 0; } to { left: 400px; } } @-moz-keyframes "loading" { from { left: 0; } to { left: 400px; } } @-o-keyframes "loading" { from { left: 0; } to { left: 400px; } } </style> </head> <body> <h1>Loading...</h1> <div class="slider"> <div class="line"></div> <div class="break dot1"></div> <div class="break dot2"></div> <div class="break dot3"></div> </div> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Loading…