Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve css3 buffering and waiting effect". In daily operation, I believe many people have doubts about how to achieve css3 buffering and waiting effect. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to achieve css3 buffering and waiting effect". Next, please follow the editor to study!

Effect one

HTML

CSS

. zh-loading {position: absolute;z-index: 9: left: 0: 0; width: 100%; height: 100%; rgba;}

. zh-loading ul {position: absolute;z-index: 2: left: 50% top: 50% height: 60px: translate: hidden;-webkit-transform (- 50%,-50%);-ms-transform: translate (- 50%,-50%); transform: translate (- 50%,-50%);}

.zh-loading ul li {float: left;height: 100% width: 4px _ margin: 02px _ _ color: # ccc;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}

.zh-loading ul li:nth-of-type (2) {- webkit-animation-delay:-1.1s switch animation delay:-1.1s;}

.zh-loading ul li:nth-of-type (3) {- webkit-animation-delay:-1.0s switch animation delay:-1.0s;}

.zh-loading ul li:nth-of-type (4) {- webkit-animation-delay:-0.9s switch animation delay:-0.9s;}

@-webkit-keyframes stretchdelay {0%, 40%, 100% {- webkit-transform: scaleY (0.4)}

20% {- webkit-transform: scaleY}}

@ keyframes stretchdelay {0%, 40%, 100% {transform: scaleY;-webkit-transform: scaleY (0.4);}

20% {transform: scaleY (1.0);-webkit-transform: scaleY (1.0);}}

Effect two

@ keyframes load {

0% {transform:rotate (0)}

100% {transform:rotate (- 360deg)}

}

# load {width: 200pxteric height: 200pxpositionAnimation virtual load 1s linear infinite; transform-origin:center center;}

Effect three

HTML

CSS

.zh-loading {display: none;margin: 1rem auto 0 control width: 34px

.zh-loading li {float: left;width: 14pxscape height: 14pxscape margin: 2px 002pxbot backgroundcolor: # F2F2F2;}

.zh-loading li:nth-of-type (1) {- webkit-animation: loadingEffect 1s ease 1s infinite;-ms-animation: loadingEffect 1s ease 1s infinite;animation: loadingEffect 1s ease 1s infinite;}

.zh-loading li:nth-of-type (2) {- webkit-animation: loadingEffect 1s ease .25s infinite;-ms-animation: loadingEffect 1s ease .25s infinite;animation: loadingEffect 1s ease .25s infinite;}

.zh-loading li:nth-of-type (3) {- webkit-animation: loadingEffect 1s ease .75s infinite;-ms-animation: loadingEffect 1s ease .75s infinite;animation: loadingEffect 1s ease .75s infinite;}

.zh-loading li:nth-of-type (4) {- webkit-animation: loadingEffect 1s ease .5s infinite;-ms-animation: loadingEffect 1s ease .5s infinite;animation: loadingEffect 1s ease .5s infinite;}

@-webkit-keyframes loadingEffect {

To {background-color: # BCBCBC;}

}

@-ms-keyframes loadingEffect {

To {background-color: # BCBCBC;}

}

@ keyframes loadingEffect {

To {background-color: # BCBCBC;}

}

At this point, the study on "how to achieve css3 buffering and waiting effect" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.