参考文章
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
<!DOCTYPE html><html lang="en"><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"> <title>纯 CSS 创作一个“女神来了,快让路”的动画</title> <style> body,html{ margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } .container{ width: 8em; height: 1em; display: flex; justify-content: space-between; } .container span{ width: 1em; height: 1em; --duration:3s; } .boys{ width: 6em; display: flex; justify-content: space-between; } .container span::before{ content: ''; position: absolute; width: inherit; height: inherit; border-radius: 15%; box-shadow: 0 0 .2em rgba(0, 0, 0, .3); } .girl:before{ background-color: hotpink; } .boys span::before{ background-color: dodgerblue; animation: var(--duration) ease-in-out infinite; } .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; } .girl{ animation: slide var(--duration) ease-in-out infinite; } .boys span { animation: var(--duration) ease-in-out infinite; } .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 slide{ from { transform:translateX(0); filter:brightness(1); } to{ transform: translateX(calc(8em - (1em * 1.25))); filter: brightness(1.45); } } /* 第1个男生方块跳动 */ @keyframes jump-off-1 { 0%, 15%{ transform: rotate(0deg); } 35%, 100%{ transform-origin: -50% center; transform: rotate(-180deg); } } /* 第2个男生方块跳动 */ @keyframes jump-off-2 { 0%, 30%{ transform: rotate(0deg); } 50%, 100%{ transform-origin: -50% center; transform: rotate(-180deg); } } /* 第3个男生方块跳动 */ @keyframes jump-off-3 { 0%, 45%{ transform: rotate(0deg); } 65%, 100%{ transform-origin: -50% center; transform: rotate(-180deg); } } /* 第4个男生方块跳动 */ @keyframes jump-off-4 { 0%, 60%{ transform: rotate(0deg); } 80%, 100%{ transform-origin: -50% center; transform: rotate(-180deg); } } /* 动画的过程是从正常到压扁、然后抻长、再压扁、最后恢复正常 */ @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 bottom; 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 bottom; 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 bottom; 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 bottom; transform: scale(1.3, 0.7); } 100%, 100%{ transform: scale(1, 1); } } </style></head><body> <!-- 原文 https://segmentfault.com/a/1190000016287188 --> <div class="container"> <span class="girl"></span> <div class="boys"> <span></span> <span></span> <span></span> <span></span> </div> </div></body></html>