css3缓冲和等待效果怎么实现

这篇文章主要介绍“css3缓冲和等待效果怎么实现”，在日常操作中，相信很多人在css3缓冲和等待效果怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3缓冲和等待效果怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
　　效果一
　　HTML
　　
　　CSS
　　.zh-loading{position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);}
　　.zh-loading ul{position: 免费云主机、域名absolute;z-index: 2;left: 50%;top: 50%;height: 60px;overflow: hidden;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
　　.zh-loading ul li{float: left;height: 100%;width: 4px;margin: 0 2px;background-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;animation-delay: -1.1s;}
　　.zh-loading ul li:nth-of-type(3){-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
　　.zh-loading ul li:nth-of-type(4){-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
　　@-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform: scaleY(0.4)}
　　20%{-webkit-transform: scaleY(1.0)}}
　　@keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}
　　20%{transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}
　　效果二
　　

　　@keyframes load{
　　0%{transform:rotate(0)}
　　100%{transform:rotate(-360deg)}
　　}
　　#load{width: 200px;height: 200px;animation:load 1s linear infinite; transform-origin:center center;}
　　
　　
　　
　　
　　 　　
　　
　　
　　 　　 　　
　　
　　
　　 　　
　　
　　
　　
　　效果三
　　HTML
　　
　　CSS
　　.zh-loading{display: none;margin: 1rem auto 0;width: 34px;height: 34px;}
　　.zh-loading li{float: left;width: 14px;height: 14px;margin: 2px 0 0 2px;background-color: #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;}
　　}到此，关于“css3缓冲和等待效果怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: DIV CSS书写格式实例分析

这篇“DIV CSS书写格式实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“DIV CSS书写格式实例分析”文章吧。1、免费云主机、域名D…