CSS 实现卷轴滚动，效果很赞！

文章预览

分享一个有趣的滚动特效 「庆余年2」  终于开播了~最近起点读书APP内上架了庆余年典藏书，最大的特色是里面新加入了全新的阅读皮肤，一个拟物化的卷轴滚动效果，效果如下 就是在拖动页面时，卷轴会随着页面的滚动而展开或卷起，就像在拖动真的画布一样，非常舒适，录屏可能看着不是很清晰，强烈建议去端内自行体验。 当时看到这个效果时就在思考，如何在  web  中也实现这样一个效果呢？🤔 经过一番琢磨，发现仅使用  CSS  就能完成这样的效果。下面是我复刻的效果 这是如何实现呢？一起看看吧 一、CSS 卷轴滚动的原理 首先  CSS  中并没有真正的  3d  滚动，立方体还可以勉强拼接，这种圆形的不行，因此我们需要用其他方式来实现。 这里其实是一个最简单的平移动画，只需要将纹理上下无缝平移，结合渐变和阴影，就能得到看似 ………………………………