matlab绘制小人奔跑动图,css

css

.running {

--color: #fff;

--duration: .7s;

}

.running .outer {

-webkit-animation: outer var(--duration) linear infinite;

animation: outer var(--duration) linear infinite;

}

.running .outer .body {

background: var(--color);

height: 15px;

width: 8px;

border-radius: 4px;

-webkit-transform-origin: 4px 11px;

transform-origin: 4px 11px;

position: relative;

-webkit-transform: rotate(32deg);

transform: rotate(32deg);

-webkit-animation: body var(--duration) linear infinite;

animation: body var(--duration) linear infinite;

}

.running .outer .body:before {

content: '';

width: 8px;

height: 8px;

border-radius: 4px;

bottom: 16px;

left: 0;

position: absolute;

background: var(--color);

}

.running .outer .body .arm,

.running .outer .body .arm:before,

.running .outer .body .leg,

.running .outer .body .leg:before {

content: '';

width: var(--w, 11px);

height: 4px;

top: var(--t, 0);

left: var(--l, 2px);

border-radius: 2px;

-webkit-transform-origin: 2px 2px;

transform-origin: 2px 2px;

position: absolute;

background: var(--c, var(--color));

-webkit-transform: rotate(var(--r, 0deg));

transform: rotate(var(--r, 0deg));

-webkit-animation: var(--name, arm-leg) var(--duration) linear infinite;

animation: var(--name, arm-leg) var(--duration) linear infinite;

}

.running .outer .body .arm:before {

--l: 7px;

--name: arm-b;

}

.running .outer .body .arm.front {

--r: 24deg;

--r-to: 164deg;

}

.running .outer .body .arm.front:before {

--r: -48deg;

--r-to: -36deg;

}

.running .outer .body .arm.behind {

--r: 164deg;

--r-to: 24deg;

}

.running .outer .body .arm.behind:before {

--r: -36deg;

--r-to: -48deg;

}

.running .outer .body .leg {

--w: 12px;

--t: 11px;

}

.running .outer .body .leg:before {

--t: 0;

--l: 8px;

}

.running .outer .body .leg.front {

--r: 10deg;

--r-to: 108deg;

}

.running .outer .body .leg.front:before {

--r: 18deg;

--r-to: 76deg;

}

.running .outer .body .leg.behind {

--r: 108deg;

--r-to: 10deg;

--c: none;

}

.running .outer .body .leg.behind:before {

--c: var(--color);

--r: 76deg;

--r-to: 18deg;

}

.running .outer .body .leg.behind:after {

content: '';

top: 0;

right: 0;

height: 4px;

width: 6px;

-webkit-clip-path: polygon(2px 0, 6px 0, 6px 4px, 0 4px);

clip-path: polygon(2px 0, 6px 0, 6px 4px, 0 4px);

border-radius: 0 2px 2px 0;

position: absolute;

background: var(--color);

}

@-webkit-keyframes outer {

50% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

25%,

75% {

-webkit-transform: translateY(4px);

transform: translateY(4px);

}

}

@keyframes outer {

50% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

25%,

75% {

-webkit-transform: translateY(4px);

transform: translateY(4px);

}

}

@-webkit-keyframes body {

50% {

-webkit-transform: rotate(16deg);

transform: rotate(16deg);

}

25%,

75% {

-webkit-transform: rotate(24deg);

transform: rotate(24deg);

}

}

@keyframes body {

50% {

-webkit-transform: rotate(16deg);

transform: rotate(16deg);

}

25%,

75% {

-webkit-transform: rotate(24deg);

transform: rotate(24deg);

}

}

@-webkit-keyframes arm-leg {

50% {

-webkit-transform: rotate(var(--r-to));

transform: rotate(var(--r-to));

}

}

@keyframes arm-leg {

50% {

-webkit-transform: rotate(var(--r-to));

transform: rotate(var(--r-to));

}

}

@-webkit-keyframes arm-b {

30%,

70% {

-webkit-transform: rotate(var(--r-to));

transform: rotate(var(--r-to));

}

}

@keyframes arm-b {

30%,

70% {

-webkit-transform: rotate(var(--r-to));

transform: rotate(var(--r-to));

}

}

.buttons {

position: absolute;

left: 0;

right: 0;

bottom: 40px;

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.buttons button {

border: 0;

background: 0;

padding: 8px 16px;

margin: 0;

font-weight: 500;

font-size: 16px;

cursor: pointer;

outline: none;

-webkit-appearance: none;

color: var(--c, #8A91B4);

transition: color .3s, -webkit-transform .3s;

transition: color .3s, transform .3s;

transition: color .3s, transform .3s, -webkit-transform .3s;

-webkit-transform: scale(var(--s, 1));

transform: scale(var(--s, 1));

}

.buttons button:hover {

--c: #D1D6EE;

}

.buttons button:active {

--s: .9;

}

html {

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

}

* {

box-sizing: inherit;

}

*:before, *:after {

box-sizing: inherit;

}

body {

min-height: 100vh;

display: flex;

font-family: 'Roboto', Arial;

justify-content: center;

align-items: center;

flex-direction: column;

background: #2B3044;

}

body .running {

zoom: 2;

margin-top: -32px;

}