关于下面这个网站的动画特效,有点看不懂 他使用html的data来制作的 请问这个是纯CSS和javascript可以制作的吗? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-06-13 10:43:58 1332

动画的代码如下:

        <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制作出来 求给小弟一个思路~~万分感谢~

前端开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:35:17

    其实这是一个视频
    screenshot

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程