家谱页面html,index.html

.sampleContainer{position:fixed;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);width:75px;height:100px}.loader{position:relative;width:44px;height:8px;margin:12px auto}.dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:#ccc;position:absolute}.dot_1{animation:animateDot1 1.5s linear infinite;left:12px;background:#e579b8}.dot_2{animation:animateDot2 1.5s linear infinite;animation-delay:.5s;left:24px}.dot_3{animation:animateDot3 1.5s linear infinite;left:12px}.dot_4{animation:animateDot4 1.5s linear infinite;animation-delay:.5s;left:24px}@keyframes animateDot1{0%{transform:rotate(0) translateX(-12px)}25%{transform:rotate(180deg) translateX(-12px)}75%{transform:rotate(180deg) translateX(-12px)}100%{transform:rotate(360deg) translateX(-12px)}}@keyframes animateDot2{0%{transform:rotate(0) translateX(-12px)}25%{transform:rotate(-180deg) translateX(-12px)}75%{transform:rotate(-180deg) translateX(-12px)}100%{transform:rotate(-360deg) translateX(-12px)}}@keyframes animateDot3{0%{transform:rotate(0) translateX(12px)}25%{transform:rotate(180deg) translateX(12px)}75%{transform:rotate(180deg) translateX(12px)}100%{transform:rotate(360deg) translateX(12px)}}@keyframes animateDot4{0%{transform:rotate(0) translateX(12px)}25%{transform:rotate(-180deg) translateX(12px)}75%{transform:rotate(-180deg) translateX(12px)}100%{transform:rotate(-360deg) translateX(12px)}}

一键复制

编辑

Web IDE

原始数据

按行查看

历史