这篇文章将为大家详细讲解有关如何使用原生JS实现圣旨卷轴展开效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都网站设计、网站制作服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。创新互联建站把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！
实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！
效果图：
代码如下：
诏书
* {
margin: 0;
padding: 0;
}
#animate {
margin: 40px auto;
width: 495px;
height: 150px;
position: relative;
overflow: hidden;
}
#back {
width: 495px;
height: 150px;
position: absolute;
left: 0;
top: 10px;
background: url(/upload/otherpic49/191654mcfqzdfrxann5551.png) no-repeat;
}
#left {
position: absolute;
left: 0;
}
#right {
position: absolute;
left: 16px;
}
#mark {
position: absolute;
left: 44px;
}
