html动态图标,HTML5 微软的动态图标Logo

CSS

语言：

CSSSCSS

确定

body {

background: #3d3329;

color: #fff;

font-family: 'Open Sans', sans-serif;

}

.boxes {

animation: logo 6s infinite;

position: absolute;

}

.box {

animation: scaling 1.5s cubic-bezier(0.1, 0.95, 0.7, 0.8) infinite 4.5s;

height: 50px;

width: 50px;

}

.brand {

animation: fadein 2s ease 4.5s forwards;

display: inline;

font-size: 36px;

margin: 24px 0 0 0;

opacity: 0;

position: relative;

top: -36px;

text-align: center;

z-index: 0;

}

.flex {

display: flex;

min-height: 100vh;

flex-direction: column;

justify-content: center;

resize: vertical;

}

.intro {

text-align: center;

}

.logo {

animation: moveLeft 0.5s linear 4.5s forwards;

display: inline-block;

height: 100px;

left: 100px;

margin: 0 auto;

position: relative;

width: 100px;

z-index: 1;

}

.turnOffAnimation {

animation-name: none;

}

#red {

background: #f65314;

}

#green {

background: #7cbb00;

}

#yellow {

background: #fb0;

}

#blue {

background: #00a1f1;

}

#animateRed {

animation-delay: 4.5s;

}

#animateGreen {

animation-delay: 3s;

}

#animateYellow {

animation-delay: 1.5s;

}

#animateBlue {

animation-delay: 0s;

}

@keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@keyframes logo {

0% {

left: 0px;

top: 0px;

transform: rotate(0deg);

}

25% {

left: 50px;

top: 0px;

transform: rotate(-180deg);

}

50% {

left: 50px;

top: 50px;

transform: rotate(-360deg);

}

75% {

left: 0px;

top: 50px;

transform: rotate(-540deg);

}

100% {

left: 0px;

top: 0px;

transform: rotate(-720deg);

}

}

@keyframes moveLeft {

from {

padding-right: 0;

left: 100px;

}

to {

padding-right: 50px;

left: 0;

}

}

@keyframes scaling {

0%, 100% {

transform: scale(1);

}

50% {

transform: scale(0.5);

}

}