CSS3利用Hack元素实现兼容点点点转转转loading效果实例页面

回到相关文章 »

代码：

CSS代码：
/* 无限旋转 哔哔哔->奥特曼 */
.spin {
    -webkit-transform: rotate(360deg);
    -webkit-animation: spin 1s linear infinite; 
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
}
.spin {
    transform: rotate(360deg);
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
}

/* 隐藏Hack元素 */
.hack { position: absolute; visibility: hidden; }
/* IE6-IE9实现 */
.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
}
/* IE10+以及其他或骚或帅之流 */
.hack:valid ~ .loading {
    background: none;
    text-align: left;
}
.hack:valid ~ .loading::before {
    content: '';
    width: 3px; height: 3px;
    margin-left: 14.5px; margin-top: 14.5px;  /* 居中显示 */
    border-radius: 100%;                      /* 圆角 */
    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 扩展 */
                10px 0px #333,                /* 右 */    
                0 10px #333,                  /* 下 */
                -10px 0 #333,                 /* 左 */
                              
                -7px -7px 0 .5px #333,        /* 左上, 0.5px扩展 */
                7px -7px 0 1.5px #333,        /* 右上, 1.5px扩展 */                    
                7px 7px #333,                 /* 右下 */
                -7px 7px #333;                /* 左下 */
    position: absolute;
}
HTML代码：
<input class="hack">
<div class="loading spin"></div>

效果：