運動氣泡

效果靜態(tài)圖

代碼：

? ? ? ? ul li:nth-child(1){

? ? ? ? ? ? ? ? background-color: #ADFF2F;

? ? ? ? ? ? ? ? animation: name 1s infinite;

? ? ? ? ? ? }

? ? ? ? ? ? ul li:nth-child(2){

? ? ? ? ? ? ? ? background-color: aquamarine;

? ? ? ? ? ? ? ? animation:name 1s 0.7s linear infinite;

? ? ? ? ? ? }

? ? ? ? ? ? ul li:nth-child(3){

? ? ? ? ? ? ? ? background-color: bisque;

? ? ? ? ? ? ? ? animation:name 1s 0.9s linear infinite;

? ? ? ? ? ? }

? ? ? ? ? ? ul li:nth-child(4){

? ? ? ? ? ? ? ? background-color: chocolate;

? ? ? ? ? ? ? ? animation:name 1s 1.1s linear infinite;

? ? ? ? ? ? }

? ? ? ? ?@keyframes name{

? ? ? ? ? ? ? ? 0%{

? ? ? ? ? ? ? ? ? ? transform: translateY(0px);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? 50%{

? ? ? ? ? ? ? ? ? ? transform: translateY(20px);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? 75%{

? ? ? ? ? ? ? ? ? ? transform: translateY(-20px);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? 100%{

? ? ? ? ? ? ? ? ? ? transform: translateY(0px);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

呼吸效果： 變大變小

.breathe:nth-child(1){

? ? ? ? ? ? ? ? animation: size 1s infinite;

? ? ? ? ? ? }

? ? ? ? ? ? .breathe:nth-child(2){

? ? ? ? ? ? ? ? background-color: #2e8cff;

? ? ? ? ? ? ? ? animation: size 1s 0.7s linear infinite;

? ? ? ? ? ? }

@keyframes size {

? ? ? ? ? ? ? 0%{

? ? ? ? ? ? ? ? ? ? transform: scale(1);

? ? ? ? ? ? ? }

? ? ? ? ? ? ? 50%{

? ? ? ? ? ? ? ? ? ? transform: scale(1.1);

? ? ? ? ? ? ? }

? ? ? ? ? ? ? 100%{

? ? ? ? ? ? ? ? ? ? transform: scale(1);

? ? ? ? ? ? ? }

? ? ? ? ? ? }