html css 奥运五环,CSS3 奥运五环加载动画

柔情只为你懂 2022-10-07 08:51 144阅读 0赞

CSS

语言：

CSSSCSS

确定

html \{

height: 100%;

body \{

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

\-webkit-box-orient: vertical;

\-webkit-box-direction: normal;

\-webkit-flex-direction: column;

\-ms-flex-direction: column;

flex-direction: column;

\-webkit-box-align: center;

\-webkit-align-items: center;

\-ms-flex-align: center;

align-items: center;

\-webkit-box-pack: center;

\-webkit-justify-content: center;

\-ms-flex-pack: center;

justify-content: center;

height: 100%;

.spinner-container \{

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

\-webkit-box-orient: horizontal;

\-webkit-box-direction: normal;

\-webkit-flex-direction: row;

\-ms-flex-direction: row;

flex-direction: row;

.spinner \{

\-webkit-box-flex: 0;

\-webkit-flex-grow: 0;

\-ms-flex-positive: 0;

flex-grow: 0;

\-webkit-flex-shrink: 0;

\-ms-flex-negative: 0;

flex-shrink: 0;

width: 80px;

height: 80px;

margin-left: -36px;

background: none;

border-radius: 50%;

border: 8px solid currentColor;

box-sizing: border-box;

\-webkit-animation-name: spin;

animation-name: spin;

\-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

\-webkit-animation-fill-mode: backwards;

animation-fill-mode: backwards;

\-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

\-webkit-animation-timing-function: linear;

animation-timing-function: linear;

.spinner:first-child \{

margin-left: 0;

color: rgba(0, 41, 140, 0.2);

border-top-color: \#00298C;

.spinner:nth-child(2) \{

color: rgba(255, 239, 8, 0.2);

border-top-color: \#FFEF08;

.spinner:nth-child(3) \{

color: rgba(0, 0, 0, 0.2);

border-top-color: \#000000;

.spinner:nth-child(4) \{

color: rgba(8, 123, 57, 0.2);

border-top-color: \#087B39;

.spinner:nth-child(5) \{

color: rgba(222, 24, 24, 0.2);

border-top-color: \#DE1818;

.spinner:nth-child(2n) \{

margin-top: 40px;

@-webkit-keyframes spin \{

0% \{

\-webkit-transform: rotate(0);

transform: rotate(0);

100% \{

\-webkit-transform: rotate(360deg);

transform: rotate(360deg);

@keyframes spin \{

0% \{

\-webkit-transform: rotate(0);

transform: rotate(0);

100% \{

\-webkit-transform: rotate(360deg);

transform: rotate(360deg);

html css 奥运五环,CSS3 奥运五环加载动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Python3 turtle绘制奥运五环代码实例

相关 css实现五环

相关画奥运五环

相关 Java学习之AWT绘图“奥运五环”

相关 html css 奥运五环,CSS3 奥运五环加载动画

相关 HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️

相关 CreateJS奥运五环动画

相关 canvas画奥运五环

相关绘制自适应奥运五环

相关用css写一个有趣的奥运五环~。