关于下面这个网站的动画特效，有点看不懂 他使用html的data来制作的 请问这个是纯CSS和javascript可以制作的吗？

动画的代码如下：

        <div id="solutions-details-intersection-adaptive" class="video-group" data-videogroup="details">

            <div class="videos-links-map">
                <ul>
                    <li class="divider-slash back"></li>
                    <li><a href="#" class="videos-nav-link btn-city nonhighlight" data-videogroup="solutions-video-city">City</a></li>
                </ul>
                <ul>
                    <li class="divider-slash"></li>
                    <li><a href="#" class="videos-nav-link btn-intersection nonhighlight" data-videogroup="solutions-setting-intersection">Intersection</a></li>
                </ul>
                <ul>
                    <li class="divider-slash"></li>
                    <li><span class="videos-nav-title">Adaptive Control</span></li>
                </ul>
            </div>

            <a href="#" class="play-again"><span class="btn-shape"></span><span class="btn-text">play again</span></a>
            <a href="#" class="btn-play btn-m" data-videogroup="solutions-details-intersection-adaptive"></a>
        
            <div class="container_mainheader_solutions clearfix css_positioning" id="wrapp_anim-intersection-advancedetection">
                <div class="poster-img psimg-m-top" data-poster="images/posters/poster-frame-intersection.jpg"></div>
                <!-- video will be appended -->
            </div>

        </div>
        

请问这种javascript+CSS能制作出来吗？canvas的难度也太大了吧~

小弟目前能想到的就是PS制作出来原型 然后控制加载~。

如果真能纯CSS+javascript制作出来 求给小弟一个思路~~万分感谢~