纯css3动画实现画轴展开效果代码

下载地址

基本上都能看懂 .mapBox{ box-sizing: border-box; width: 800px; margin: auto; background-color: #e2deda; font-size: 30px; color: #aaa; } .map{ box-sizing: inherit; height: 100px; width: inherit; position: relative; margin: auto; } .left{ box-sizing: border-box; position: absolute; top:0; left:0; width: 50%; height: 100px; line-height: 100px; background-color: #FAFAFA; text-align: center; } .leftMask{ box-sizing: border-box; position: absolute; z-index: 3; top:0; left:0; width: 400px; height: 100px; background-color: #e2deda; animation: leftSpread 5s ease forwards; } .right{ box-sizing: border-box; position: absolute; top:0; right:0; width:400px; height: 100px; line-height: 100px; text-align: center; background-color: #FAFAFA; } .rightMask{ box-sizing: border-box; position: absolute; z-index: 3; top:0; left:50%; right: 0; height: 100px; background-color: #e2deda; animation: rightSpread 5s ease forwards; } .mask{ box-sizing: border-box; z-index: 5; height: 100px; animation: spread 5s ease forwards; background-size: 13%; border-top:10px solid #e2deda; border-left:10px solid black; border-right:10px solid black; border-bottom:10px solid #e2deda; position: absolute; left: 50%; right: 50%; top:0; bottom: 0; } @keyframes spread { from { } to { left: 0; right: 0; } } @keyframes leftSpread { from { width: 50%; } to { width: 0; } } @keyframes rightSpread { from { } to { left: 100%; } }

dd: