带微调器的叠加

2024-03-05

我正在尝试创建一个覆盖层,覆盖一个页面,中间有一个微调器。实现这一目标的最简单方法是什么?我只需要担心 IE 8 及以上版本。


使用 css3 类“spinner”。它更漂亮而且你不需要.gif

    .spinner {
       position: absolute;
       left: 50%;
       top: 50%;
       height:60px;
       width:60px;
       margin:0px auto;
       -webkit-animation: rotation .6s infinite linear;
       -moz-animation: rotation .6s infinite linear;
       -o-animation: rotation .6s infinite linear;
       animation: rotation .6s infinite linear;
       border-left:6px solid rgba(0,174,239,.15);
       border-right:6px solid rgba(0,174,239,.15);
       border-bottom:6px solid rgba(0,174,239,.15);
       border-top:6px solid rgba(0,174,239,.8);
       border-radius:100%;
    }
    
    @-webkit-keyframes rotation {
       from {-webkit-transform: rotate(0deg);}
       to {-webkit-transform: rotate(359deg);}
    }
    @-moz-keyframes rotation {
       from {-moz-transform: rotate(0deg);}
       to {-moz-transform: rotate(359deg);}
    }
    @-o-keyframes rotation {
       from {-o-transform: rotate(0deg);}
       to {-o-transform: rotate(359deg);}
    }
    @keyframes rotation {
       from {transform: rotate(0deg);}
       to {transform: rotate(359deg);}
    }

示例如下:http://jsbin.com/roqakuxebo/1/edit http://jsbin.com/roqakuxebo/1/edit

你可以在这里找到很多这样的 css spinner:http://cssload.net/en/spinners/ http://cssload.net/en/spinners/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带微调器的叠加 的相关文章